"use client";
import { CheckBoxForm } from '@/components/Form/CheckBoxForm';
import { InputForm } from '@/components/Form/inputForm';
import { Form, Formik, FormikProps } from 'formik';
import { signIn } from 'next-auth/react';
import React, { useState } from 'react';
import { getTranslation } from '../../../../i18n';
import Link from 'next/link';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { coloredToast } from '@/components/common/ComponetToast';

export interface FormValues {
    username: string;
    password: string;
}
export const ComponentForm = () => {
    const { t } = getTranslation();
    const router = useRouter();

    const [isLoading, setIsLoading] = useState(false);
    const [isShowPassword, setIsShowPassword] = useState(true);
    const handelSubmit = async (values: FormValues) => {
        try {
            setIsLoading(true)
            const result = await signIn('credentials', {
                password: values.password,
                username: values.username,
                redirect: false,
            });
            if (result && result.error) {
                const data = JSON.parse(result.error?.split("Error:")[1] ?? '')
                setIsLoading(false)
                return coloredToast('danger', data.message)
            }
            if (result?.status == 200) {
                router.push('/')
            }
            else {
                coloredToast('danger', t("error-singIn-message"))
            }
            setIsLoading(false)
        } catch (error) {
            setIsLoading(false)
            coloredToast('danger', t("error-singIn-message"))

        }


    }


    return (
        <div className='flex justify-center items-center gap-8  h-full w-full'>
            <div className=" m-6 w-full max-w-lg sm:w-[480px]">
                <h2 className="text-black text-opacity-90 text-[40px] font-semibold font-['Alexandria'] leading-[56px]">  {t('signIn')}</h2>
                <div className="opacity-75 text-black text-opacity-60 text-base font-normal font-['Alexandria'] leading-normal">{t("log-in-to-your-account-to-access-the-driving-test-platform")}</div>
                <Formik<FormValues>
                    initialValues={{
                        username: '',
                        password: '',
                    }}
                    onSubmit={handelSubmit}

                >
                    {(props: FormikProps<any>) => (
                        <Form className={'flex flex-col gap-4'}>
                            <InputForm
                                className="text-black text-opacity-90 text-sm font-normal font-['Alexandria'] leading-[21px] h-14 bg-white rounded-[63px] border border-zinc-300"
                                formikProps={props}
                                name={'username'}
                                title={t('username')}
                                placeholder={t('enter-username')}

                            />
                            <InputForm
                                iconRight={
                                    <button
                                        type="button"
                                        className="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center px-3"
                                        onClick={() => {
                                            setIsShowPassword((isShowPassword) => !isShowPassword);
                                        }}
                                    >
                                        {isShowPassword ? (
                                            <svg className="h-5 w-5 text-gray-500 dark:text-gray-400" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M2.03555 12.3224C1.96647 12.1151 1.9664 11.8907 2.03536 11.6834C3.42373 7.50972 7.36079 4.5 12.0008 4.5C16.6387 4.5 20.5742 7.50692 21.9643 11.6776C22.0334 11.8849 22.0335 12.1093 21.9645 12.3166C20.5761 16.4903 16.6391 19.5 11.9991 19.5C7.3612 19.5 3.42564 16.4931 2.03555 12.3224Z"
                                                    stroke="#0F172A"
                                                    strokeWidth="1.5"
                                                    strokeLinecap="round"
                                                    strokeLinejoin="round"
                                                />
                                                <path
                                                    d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
                                                    stroke="#0F172A"
                                                    strokeWidth="1.5"
                                                    strokeLinecap="round"
                                                    strokeLinejoin="round"
                                                />
                                            </svg>
                                        ) : (
                                            <svg className="h-5 w-5 text-gray-500 dark:text-gray-400" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M3.97993 8.22257C3.05683 9.31382 2.35242 10.596 1.93436 12.0015C3.22565 16.338 7.24311 19.5 11.9991 19.5C12.9917 19.5 13.9521 19.3623 14.8623 19.1049M6.22763 6.22763C7.88389 5.13558 9.86771 4.5 12 4.5C16.756 4.5 20.7734 7.66205 22.0647 11.9985C21.3528 14.3919 19.8106 16.4277 17.772 17.772M6.22763 6.22763L3 3M6.22763 6.22763L9.87868 9.87868M17.772 17.772L21 21M17.772 17.772L14.1213 14.1213M14.1213 14.1213C14.6642 13.5784 15 12.8284 15 12C15 10.3431 13.6569 9 12 9C11.1716 9 10.4216 9.33579 9.87868 9.87868M14.1213 14.1213L9.87868 9.87868"
                                                    stroke="#0F172A"
                                                    strokeWidth="1.5"
                                                    strokeLinecap="round"
                                                    strokeLinejoin="round"
                                                />
                                            </svg>
                                        )}
                                    </button>


                                }
                                className="text-black text-opacity-90 text-sm font-normal font-['Alexandria'] leading-[21px] h-14 bg-white rounded-[63px] border border-zinc-300"
                                formikProps={props}
                                name={'password'}
                                title={t('password')}
                                placeholder={t('enter-password')}
                                props={{
                                    type: isShowPassword ? 'password' : 'text'
                                }}

                            />

                            <div className='flex'>
                                <CheckBoxForm
                                    className="text-black text-opacity-90 text-sm font-normal font-['Alexandria'] leading-[21px]  bg-white   border border-zinc-300"
                                    formikProps={props}
                                    name={'rememberMe'}
                                    title={t('rememberMe')}
                                />
                                <div className="ltr:text-right rtl:text-left text-red-500 text-sm font-normal font-['Alexandria'] leading-[21px] w-full">{t("forgot-your-password")}</div>
                            </div>
                            <button type="submit" className="h-[54px] px-[38px] py-[26px] bg-primary rounded-[96px] justify-center items-center gap-1.5 inline-flex">
                                {isLoading &&
                                    <span className="animate-spin border-2 border-white border-l-transparent rounded-full w-5 h-5 ltr:mr-4 rtl:ml-4 inline-block align-middle"></span>
                                }
                                <div className="text-center text-white text-base font-medium font-['Alexandria'] leading-normal">{t("signIn")}</div>
                            </button>
                            {/* <div className=" mt-4 text-center">
                                <span className="text-black text-opacity-90 text-sm font-normal font-['Alexandria'] leading-[21px]">{t("don't-have-an-account")}</span>
                                <Link href={"/signUp"} className="px-2 text-primary text-sm font-normal font-['Alexandria'] leading-[21px]">{t("create-an-account")}</Link>
                            </div> */}
                        </Form>)}
                </Formik>

            </div>
            <div className='max-md:hidden'>
                <Image className='w-full h-full' src="/assets/images/singIn.svg" alt={'singIn image'} width={100} height={100} />

            </div>

            <div id="danger-toast"></div>
        </div>
    )
}