'use client'

import { useState } from 'react';
import { EditOutlined } from '@ant-design/icons';
import { i18nText } from '../../../i18nKeys';
import { ExpertData, PayInfo } from '../../../types/profile';
import { LinkButton } from '../../view/LinkButton';
import { EditExpertPayDataModal } from '../../Modals/EditExpertPayDataModal';

type ExpertPayDataProps = {
    locale: string;
    data?: PayInfo;
    updateExpert: (key: keyof ExpertData) => void;
};

export const ExpertPayData = ({ locale, data, updateExpert }: ExpertPayDataProps) => {
    const [showEdit, setShowEdit] = useState<boolean>(false);

    const hide = (str?: string)  => {
        const reg = new RegExp('(.)(?=.*....)', 'gi');
        return str ? str.replace(reg, '*') : '';
    }

    return (
        <div className="coaching-section__wrap">
            <div className="coaching-section">
                <div className="coaching-section__title">
                    <h2 className="title-h2">{i18nText('payInfo', locale)}</h2>
                    <LinkButton
                        type="link"
                        icon={<EditOutlined />}
                        onClick={() => setShowEdit(true)}
                    />
                </div>
                <div className="base-text pay-data-list">
                    {data?.beneficiaryName && (
                        <div>
                            <div>{i18nText('beneficiaryName', locale)}</div>
                            <div>{data.beneficiaryName}</div>
                        </div>
                    )}
                    {data?.bicOrSwift && (
                        <div>
                            <div>{i18nText('bicOrSwift', locale)}</div>
                            <div>{hide(data.bicOrSwift)}</div>
                        </div>
                    )}
                    {data?.iban && (
                        <div>
                            <div>IBAN</div>
                            <div>{hide(data.iban)}</div>
                        </div>
                    )}
                </div>
            </div>
            <EditExpertPayDataModal
                locale={locale}
                open={showEdit}
                data={data}
                handleCancel={() => setShowEdit(false)}
                refresh={() => updateExpert('payData')}
            />
        </div>
    );
};
