import React from 'react';
import { Button } from 'reactstrap';
import { FormItem, FormWrapper } from '@/components/ui/form';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import AppInput from '@/components/ui/input/input';
import { useTranslations } from 'next-intl';
import AppButton from '@/components/ui/button/button';


type PropsType = {
    onSubmit: any;
    isLoading?: boolean;
};

const ChangeEmailForm = (props:PropsType ) => {
    const {
        onSubmit,
        isLoading
    } = props;
    const t = useTranslations("");


    const formSchema = z
    .object({
        email: z.string()
            .trim()
            .min(1, { message: t("validate.required") })
            .email({
                message: t("validate.email_invalid"),
            }),
    });

    type ChangeEmailFormSchema = z.infer<typeof formSchema>;

    const changePasswordForm = useForm<ChangeEmailFormSchema>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            email: "",
        },
    });

    return (
        <>
            <FormWrapper<ChangeEmailFormSchema>
                form={changePasswordForm}
                onSubmit={onSubmit}
                layout="vertical"
                className="space-y-4"
            >
                <FormItem name="email" label={t("old_password")}>
                    {({ value, ref, ...field }) => (
                        <AppInput
                            ref={ref}
                            inputType="password"
                            value={value}
                            {...field}
                            placeholder={t("old_password_placeholder")}
                        />
                    )}
                </FormItem>
                <AppButton
                    type="primary"
                    htmlType="submit"
                    loading={isLoading}
                    className="w-fit"
                >
                    {t("button.save")}
                </AppButton>
            </FormWrapper>
            {/* <form autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
            <Field
                name="email"
                label="label.newEmail"
                type="text"
                component={renderField}
                validate={[validations.required, validations.email]}
            />
            <FormGroup className="text-right mt-5">
                <Button
                className="btn btn-info"
                variant="contained"
                color="primary"
                type="submit"
                >
                <TranslateMessage id="label.save" />
                </Button>
            </FormGroup>
            </form> */}
        </>
    );
};

export default ChangeEmailForm;