'use client';

import React, { Dispatch, FC, SetStateAction, useEffect } from 'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { Modal, Form } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { RegisterContent, ResetContent, FinishContent, EnterContent } from './authModalContent';
import { i18nText } from '../../i18nKeys';

type AuthModalProps = {
    open: boolean;
    handleCancel: () => void;
    mode: 'enter' | 'register' | 'reset' | 'finish';
    updateMode: (mode: 'enter' | 'register' | 'reset' | 'finish') => void;
    updateToken: string | Dispatch<SetStateAction<string | undefined>> | undefined;
    locale: string;
};

export const AuthModal: FC<AuthModalProps> = ({
    open,
    handleCancel,
    mode,
    updateMode,
    updateToken,
    locale
}) => {
    const [form] = Form.useForm<{ login: string, password: string, confirmPassword: string }>();
    const paths = usePathname().split('/');

    const onAfterClose = () => {
        form.resetFields();
    };

    useEffect(() => {
        if (form) {
            form.resetFields();
        }
    }, [mode]);

    const onUpdateToken = (token: string) => {
        if (updateToken && typeof updateToken !== 'string') {
            updateToken(token);
        }
    };

    return (
        <Modal
            className="b-modal"
            open={open}
            title={undefined}
            onOk={undefined}
            onCancel={handleCancel}
            afterClose={onAfterClose}
            footer={false}
            width={598}
            closeIcon={<CloseOutlined style={{ fontSize: 20, color: '#000' }}/>}
        >
            <div className="b-modal__auth__content">
                <div className="b-modal__auth__logo">
                    <img className="" src="/images/logo-auth.svg" alt=""/>
                </div>
                {mode === 'enter' && (
                    <EnterContent
                        form={form}
                        updateMode={updateMode}
                        locale={paths[1]}
                        handleCancel={handleCancel}
                        updateToken={onUpdateToken}
                    />
                )}
                {mode === 'register' && (
                    <RegisterContent
                        form={form}
                        locale={paths[1]}
                        updateMode={updateMode}
                        updateToken={onUpdateToken}
                        handleCancel={handleCancel}
                    />
                )}
                {mode === 'reset' && (
                    <ResetContent form={form} updateMode={updateMode} locale={paths[1]} />
                )}
                {mode === 'finish' && (
                    <FinishContent locale={paths[1]} />
                )}
                <div className="b-modal__auth__agreement">
                    {`${i18nText('agreementText', locale)} `}
                    <Link href={'/docs/BBUDDY_privacy_policy_fin.docx' as any}>{i18nText('privacyPolicy', locale)}</Link>
                </div>
            </div>
        </Modal>
    );
};