'use client';

import React, { FC, useEffect, useState } from 'react';
import { Modal, Button, message, Form } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { i18nText } from '../../i18nKeys';
import { PayInfo } from '../../types/profile';
import { AUTH_TOKEN_KEY } from '../../constants/common';
import { useLocalStorage } from '../../hooks/useLocalStorage';
import { setPayData } from '../../actions/profile';
import { CustomInput } from '../view/CustomInput';

type EditExpertPayDataModalProps = {
    open: boolean;
    handleCancel: () => void;
    locale: string;
    data?: PayInfo;
    refresh: () => void;
};

export const EditExpertPayDataModal: FC<EditExpertPayDataModalProps> = ({
    open,
    handleCancel,
    locale,
    data,
    refresh
}) => {
    const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
    const [loading, setLoading] = useState<boolean>(false);
    const [form] = Form.useForm<PayInfo>();

    useEffect(() => {
        if (open) {
            if (data) {
                form.setFieldsValue(data);
            } else {
                form.resetFields();
            }
        }
    }, [open, data]);

    const onSavePayData = () => {
        form.validateFields().then(({ beneficiaryName, bicOrSwift, iban }) => {
            setLoading(true);
            setPayData(locale, jwt, { beneficiaryName, bicOrSwift, iban })
                .then(() => {
                    handleCancel();
                    refresh();
                })
                .catch(() => {
                    message.error('Не удалось сохранить платежную информацию');
                })
                .finally(() => {
                    setLoading(false);
                })
        })
    };

    return (
        <Modal
            className="b-modal"
            open={open}
            title={undefined}
            onOk={undefined}
            onCancel={handleCancel}
            footer={false}
            width={498}
            closeIcon={<CloseOutlined style={{ fontSize: 20, color: '#000' }}/>}
        >
            <div className="b-modal__expert__content">
                <div className="b-modal__expert__title">{i18nText('payInfo', locale)}</div>
                <div className="b-modal__expert__inner">
                    <Form form={form} style={{ width: '100%', display: 'flex', gap: 16, flexDirection: 'column' }}>
                        <Form.Item
                            name="beneficiaryName"
                            noStyle
                        >
                            <CustomInput
                                size="small"
                                placeholder={i18nText('beneficiaryName', locale)}
                                autoComplete="off"
                            />
                        </Form.Item>
                        <Form.Item
                            name="bicOrSwift"
                            noStyle
                        >
                            <CustomInput
                                size="small"
                                placeholder={i18nText('bicOrSwift', locale)}
                                autoComplete="off"
                            />
                        </Form.Item>
                        <Form.Item
                            name="iban"
                            noStyle
                        >
                            <CustomInput
                                size="small"
                                placeholder="IBAN"
                                autoComplete="off"
                            />
                        </Form.Item>
                    </Form>
                </div>
                <div className="b-modal__expert__button">
                    <Button
                        className="card-detail__apply"
                        onClick={onSavePayData}
                        loading={loading}
                    >
                        {i18nText('save', locale)}
                    </Button>
                </div>
            </div>
        </Modal>
    );
};
