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



type PropsType = {
    onSubmit?: any;
    strictPassword: boolean;
    isLoading?: boolean;
}
const ChangePasswordForm = (props: PropsType) => {
    const {
        onSubmit,
        strictPassword,
        isLoading
    } = props;

    const t = useTranslations("");

    const YupValidations = {
        password: z.string()
          .min(1, t('validate.required'))
          .regex(PATTERNS.PASSWORD_PATTERN, {
            message: t('validate.password.minLength')
          })
          .max(32, t('validate.max_length_32'))
          .regex(PATTERNS.PASSWORD_UPPER, {
            message: t('validate.password.uppercase')
          })
          .regex(PATTERNS.PASSWORD_LOWER, {
            message: t('validate.password.lowercase')
          })
          .regex(PATTERNS.PASSWORD_NUMBER, {
            message: t('validate.password.number')
          })
          .refine(value => !value.includes(' '), t('validate.password.spaces')),
        
        weakPassword: z.string()
          .min(4, t('validate.min_length_4'))
          .max(16, t('validate.max_length_16'))
          .refine(value => !value.includes(' '), t('validate.password.spaces')),
    }
    const formSchema = z
    .object({
        currentPassword: z
            .string()
            .min(1, { message: t("validate.required", { length: 1 }) })
            .max(32, { message: t("validate.max_length_32") })
            .refine((value) => !/\s/.test(value), {
                message: t("validate.password.spaces"),
            }),
        newPassword: strictPassword ? YupValidations.password : YupValidations.weakPassword,
        confirmPassword: strictPassword ? YupValidations.password : YupValidations.weakPassword,
    })
    .refine((data) => data.newPassword === data.confirmPassword, {
        message: t("validate.confirmPassword.mismatch"),
        path: ["confirmPassword"],
    });

    type ChangePasswordFormSchema = z.infer<typeof formSchema>;

    const changePasswordForm = useForm<ChangePasswordFormSchema>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            currentPassword: "",
            newPassword: "",
            confirmPassword: "",
        },
    });

    return (
        <>
            <FormWrapper<ChangePasswordFormSchema>
                form={changePasswordForm}
                onSubmit={(data) => {
                    console.log(' >>>>>>> data: ', data);
                    
                    onSubmit(data);
                }}
                layout="vertical"
                className="space-y-4"
            >

                <FormItem name="currentPassword" label={t("label.currentPassword")}>
                    {({ value, ref, ...field }) => (
                        <AppInput
                            ref={ref}
                            inputType="password"
                            value={value}
                            {...field}
                            placeholder={t("label.currentPassword")}
                        />
                    )}
                </FormItem>
                
                <FormItem name="newPassword" label={t("label.newPassword")}>
                    {({ value, ref, ...field }) => (
                        <AppInput
                            ref={ref}
                            inputType="password"
                            value={value}
                            {...field}
                            placeholder={t("label.newPassword")}
                        />
                    )}
                </FormItem>
        
                <FormItem name="confirmPassword" label={t("label.confirmPassword")}>
                    {({ value, ref, ...field }) => (
                        <AppInput
                            ref={ref}
                            inputType="password"
                            value={value}
                            {...field}
                            placeholder={t("label.confirmPassword")}
                        />
                    )}
                </FormItem>
                <div className="text-right mt-5">

                    <AppButton type="submit" disabled={isLoading}>
                        {t("button.save")}
                    </AppButton>
                </div>
            </FormWrapper>
            {/* <Formik
                enableReinitialize={false}
                initialValues={{
                    currentPassword: '',
                    newPassword: '',
                    confirmPassword: ''
                }}
                onSubmit={onSubmit}
                validationSchema={validationSchema}
            >
                {() => {
                    return (
                        <Form autoComplete="off" aria-autocomplete="none">
                            <Field
                                name="currentPassword"
                                label="label.currentPassword"
                                type="password"
                                component={InputFieldButtonRight}
                            />
                            <Field
                                name="newPassword"
                                label="label.newPassword"
                                type="password"
                                component={InputFieldButtonRight}
                            />
                            <Field
                                name="confirmPassword"
                                label="label.confirmPassword"
                                type="password"
                                component={InputFieldButtonRight}
                            />
                            <FormGroup className="text-right mt-5">
                                <Button
                                    className="btn btn-info"
                                    variant="contained"
                                    color="primary"
                                    type="submit"
                                >
                                    {t('label.save')}
                                </Button>
                            </FormGroup>
                        </Form>
                    );
                }}
            </Formik> */}
        </>
    );
};

export default ChangePasswordForm;