import React, { FC } from 'react';
import { Form, FormInstance } from 'antd';
import { CustomInput } from '../../view/CustomInput';
import { FilledButton } from '../../view/FilledButton';
import { LinkButton } from '../../view/LinkButton';
import { i18nText } from '../../../i18nKeys';

type ResetProps = {
    form: FormInstance;
    updateMode: (mode: 'enter' | 'register' | 'reset' | 'finish') => void;
    locale: string;
}

export const ResetContent: FC<ResetProps> = ({
    form,
    updateMode,
    locale
}) => {
    const onResetPassword = () => {
        console.log('reset');
    };

    return (
        <>
            <Form form={form} autoComplete="off" style={{ display: 'flex', gap: 16, flexDirection: 'column' }}>
                <Form.Item
                    name="login"
                    noStyle
                    rules={[
                        {
                            type: 'email',
                            message: i18nText('errors.validEmail', locale)
                        },
                        {
                            required: true,
                            message: i18nText('error.emptyEmail', locale)
                        }
                    ]}
                >
                    <CustomInput
                        size="small"
                        placeholder="E-mail"
                        type="email"
                    />
                </Form.Item>
            </Form>
            <FilledButton
                type="primary"
                onClick={onResetPassword}
            >
                {i18nText('resetPass', locale)}
            </FilledButton>
            <LinkButton
                type="link"
                onClick={() => updateMode('enter')}
            >
                {i18nText('enter', locale)}
            </LinkButton>
        </>
    );
}