import PreLoginLayout from '@/components/Layouts/PreLoginLayout';
import style from '@/styles/modules/prelogin/prelogin-layout.module.scss';
import Password from '@/components/Form/Password';
import Link from 'next/link';
import { useRouter } from 'next/router';
import DashboardLayout from '@/components/Layouts/DashboardLayout';
import { useForm } from 'react-hook-form';
import { useChangePasswordMutation } from '@/lib/redux/services/auth.api';
import { signOut, useSession } from 'next-auth/react';
import toast from 'react-hot-toast';
import { yupResolver } from '@hookform/resolvers/yup';
import { ChangePasswordSchema } from '@/lib/validations';
import { Spinner } from 'react-bootstrap';

export default function ChangePassword() {
  const router = useRouter();
  const { data: session }: any = useSession();
  const token = session?.user?.token;
  const user_id = session?.user?._id;
  const [ChangePass, { isLoading }] = useChangePasswordMutation();
  const { register, handleSubmit } = useForm({
    resolver: yupResolver(ChangePasswordSchema),
  });

  const handlePasswordChange = async (data: any) => {
    isLoading === true;
    try {
      const response: any = await ChangePass({
        body: {
          currentpassword: data?.password,
          newpassword: data?.newpassword,
          userId: user_id,
        },
        token,
      }).unwrap();
      if (response?.status) {
        toast.success('Password Updated Succesfully');
        router.push('/auth/login');
        isLoading === false;
      }
    } catch (err: any) {
      console.error(err);
      toast.error('Something went wrong');
    }
  };
  return (
    <>
      <DashboardLayout>
        <div className="change-password">
          <form className="prelogin form-wrapper" onSubmit={handleSubmit(handlePasswordChange)}>
            <div className="back-link">
              <img
                src={'/images/sidbar-icon/arrow-left.svg'}
                onClick={() => router.back()}
                alt=""
              />
              <h2 className="heading text-dark pb-3 mb-0">Change Password</h2>
            </div>
            <p className={style.form_para}>Please enter your new password to continue.</p>
            <div className="mt-3">
              {/* PASSWORD */}
              <Password
                id="txtPassword"
                name="txtPassword"
                resolver={{ ...register('password') }}
                label="Current Password"
                placeholder="Enter Current Password"
              />
              {/* RE TYPE PASSWORD */}
              <Password
                id="txtPassword"
                name="txtPassword"
                resolver={{ ...register('newpassword') }}
                label="New Password"
                placeholder="Enter New Password"
              />
              {/* RE TYPE PASSWORD */}
              <Password
                id="txtPassword"
                name="txtPassword"
                resolver={{ ...register('confirmpassword') }}
                label="Confirm Password"
                placeholder="Enter Confirm Password"
              />
            </div>
            <div className="form-group">
              <button className=" w-100 btn btn-primary mt-3" type="submit">
                {isLoading ? <Spinner size="sm" /> : 'Continue'}
              </button>
            </div>
          </form>
        </div>
      </DashboardLayout>
    </>
  );
}