import React from 'react'
import { Form, Button } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import * as Yup from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'
import MyAccountLayout from '../../components/Layout/MyAccountLayout'
import PasswordInput from '../../components/PasswordInput'
import requestApi from '../../utils/request'
import { useAdminInfo } from '../../context/AdminContextDetail'
import { useMutation } from 'react-query'
import { useState } from 'react'
import Swal from 'sweetalert2'
import ButtonWithLoader from '../../components/ButtonWithLoader/ButtonWithLoader'
const ChangePasswordSchema = Yup.object().shape({
    oldPassword: Yup.string()
        .required('Please enter current password')
        .min(6, 'Current password must have atleast 6 characters'),
    newPassword: Yup.string()
        .required('Please enter new password')
        .min(6, 'New Password must have atleast 6 characters'),
    confirmPassword: Yup.string()
        .required('Please enter confirm password')
        .min(6, 'Confirm password must have atleast 6 characters')
        // .test("text","New password and confirm password does not match.",function(value){
        //     console.log(this.parent.newPassword,"value")
        //     return this.parent.newPassword ===value
        // })
        .oneOf(
           [Yup.ref("newPassword")],
            'New password and confirm password does not match.'
        )
})

const ChangePasswordpage = () => {
    const {
        currentUser: { email }
    } = useAdminInfo()

    const {
        register,
        handleSubmit,
        reset,
        formState: { errors }
    } = useForm({ resolver: yupResolver(ChangePasswordSchema) })
    const [disableBtn, setDisableBtn] = useState(false)
    async function adminChangePassword(payload) {
        return await requestApi.post(`/change-password`, payload)
    }
    const mutation = useMutation(adminChangePassword, {
        onSuccess: (data) => {
            const { oldPassword, newPassword, confirmPassword, email } = data
            const payload = {
                oldPassword,
                newPassword,
                confirmPassword,
                email
            }
            Swal.fire({
                icon:'success',
                text:data?.data?.meta?.message,
                position:'center',
                title:''
            })
            reset()
        },
        onError: (err) => {    
            Swal.fire({
                icon:"error",
                text:err?.message,
                position:'center',
                title:""
            })
        }
    })

    const handleOnSubmit = (payload) => {
        mutation.mutate(payload)
    }
    return (
            <div className="myaccount-sidebar-content">
                <div className="title-text">
                    <h3>Change Password</h3>
                </div>
                <div className="page-content">
                    <Form onSubmit={handleSubmit(handleOnSubmit)}>
                        <div className="form-row">
                            <PasswordInput
                                label="Current Password"
                                name="oldPassword"
                                register={register}
                                error={errors.oldPassword?.message}
                            />
                            <PasswordInput
                                label="New Password"
                                name="newPassword"
                                register={register}
                                error={errors.newPassword?.message}
                            />
                            <PasswordInput
                                label="Confirm Password"
                                name="confirmPassword"
                                register={register}
                                error={errors.confirmPassword?.message}
                            />
                        </div>
                        <ButtonWithLoader 
                       isLoading={mutation?.isLoading}
                       cssClass="common-btn save-btn">
                        <Button
                            className="common-btn save-btn"
                            type="submit"
                        >
                            Save
                        </Button>
                        </ButtonWithLoader>
                    </Form>
                </div>
            </div>
    )
}

export default ChangePasswordpage