
import {Link} from 'react-router-dom'
import Icons from "../Icons";
import {useMutation} from '@tanstack/react-query'
import {Formik, Form} from 'formik'
import * as Yup from "yup";

import InputText from '../InputText'

export default function UpdatePassword() {

    const initialValues = {
    newPassword: "",
    confirmPassword: ""
    };

    // To get the validation schema
    const validationSchema = Yup.object().shape({
        newPassword: Yup.string()
            .min(6, 'must be upto 6 characters')
            .max(25, 'must not exceed 25 characters')
            .required("New password is required"),

        confirmPassword: Yup.string()
            .oneOf([Yup.ref("newPassword"), null], "Passwords do not match")
            .required("Confirm password is required"),
    });

        const updatePassword = useMutation({
        mutationFn: (fields) => {
            if (!fields.newPassword || !fields.confirmPassword) {
                throw new Error('Please provide all fields marked *')
            }
            // return loginUser(fields)
        },
        onError: (error) => {
            console.log(error)
        },
        onSuccess: (res) => {
            // const {jwt_token, user} = res?.data
            setTimeout(() => {
                updatePassword.reset()
            }, 3000);
        }
    })

    //FUNCTION TO HANDLE LOGIN
    const handleSubmit = (values, helper) => {
        updatePassword.mutate(values)
    };

    return <>
        <div className="flex flex-col gap-1">
            <div className="w-full">
                <h4 className="mb-3 font-semibold text-lg">Change Password</h4>
            </div>
            <div className="w-full">
                <Formik
                    initialValues={initialValues}
                    validationSchema={validationSchema}
                    onSubmit={handleSubmit}
                >
                    {(props) => (
                        <Form>
                            <div className='flex flex-col gap-8 w-full'>
                                <div className='flex flex-col gap-6'>
                                    <div className='relative text-input flex flex-col gap-2'>
                                        <p className='flex items-center gap-1'>
                                            <label className='text-lg'>New Password</label>
                                            <span className='text-red-500 text-10'>{(props.errors.newPassword && props.touched.newPassword) ? props.errors.newPassword : ''}</span>
                                        </p>
                                        <InputText
                                            id='newPassword'
                                            placeholder='New Password'
                                            name='newPassword'
                                            type='password'
                                            value={props.values.newPassword}
                                            handleChange={props.handleChange}
                                        />
                                    </div>
                                    <div className='relative text-input flex flex-col gap-2'>
                                        <p className='flex items-center gap-1'>
                                            <label className='text-lg'>Confirm Password</label>
                                            <span className='text-red-500 text-10'>{(props.errors.confirmPassword && props.touched.confirmPassword) ? props.errors.confirmPassword : ''}</span>
                                        </p>
                                        <InputText
                                            id='confirmPassword'
                                            placeholder='Confirm Password'
                                            name='confirmPassword'
                                            type='password'
                                            value={props.values.confirmPassword}
                                            handleChange={props.handleChange}
                                        />
                                    </div>
                                    <div className='flex justify-end h-10 mb-10'>
                                        <button type='submit' disabled={updatePassword.isPending} className='px-4 h-full bg-primary text-white font-bold rounded-md'>{updatePassword.isPending ? 'loading...' : 'Update Password'}</button>
                                    </div>

                                    {updatePassword.error &&
                                        <>
                                            <div className="w-full text-center">
                                                <p className='text-red-500 text-sm'>{updatePassword.error.message}</p>
                                            </div>
                                        </>
                                    }
                                    {updatePassword.success &&
                                        <>
                                            <div className="w-full text-center">
                                                <p className='text-emerald-500 text-sm'>{'Password Updated Successfully'}</p>
                                            </div>
                                        </>
                                    }
                                </div>
                            </div>
                        </Form>
                    )}
                </Formik>
            </div>
        </div>
    </>
}



