import { Link, useNavigate } from "react-router-dom"
import { Input } from "../common/input"
import { Controller, SubmitHandler, useForm } from "react-hook-form"
import { LoginFormInterface } from "../../types"
import { loginSchema } from "../../schema"
import { ErrorComponent } from "../common/error"
import { yupResolver } from '@hookform/resolvers/yup'
import { useMutation } from "@tanstack/react-query"
import { loginMutation } from "../../services/api/auth"
import { ButtonComponent } from "../common/button"
import toast from "react-hot-toast"

export const LoginForm = () => {
    const navigate = useNavigate()

    const { mutate, isPending } = useMutation({
        mutationFn: loginMutation
    })
    const {
        handleSubmit,
        formState: { errors },
        control,
    } = useForm<LoginFormInterface>({
        resolver: yupResolver(loginSchema)
    })
    const handleLoginSubmit: SubmitHandler<LoginFormInterface> = async (data) => {
        mutate({
            ...data,
            remember_me: true
        }, {
            onSuccess: (data: any) => {
                window.localStorage.setItem("token", data?.data?.token)
                toast.success("با موفقیت وارد شدین")
                navigate("/")
            },
            onError: () => {
                toast.error("نام کاربری یا رمز عبور اشتباه است")
            }
        })
    }

    return (
        <form onSubmit={handleSubmit(handleLoginSubmit)}
            className="w-full sm:w-fit sm:min-w-[500px] xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
            <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
            <div className="flex flex-col xl:-mr-24 w-full md:w-[400px]">
                <div className="flex flex-col gap-y-5">
                    <span className="font-medium text-lg md:text-2xl xl:text-3xl text-primary-text-color">وارد حساب کاربری شوید</span>
                    <div className="flex flex-row gap-x-0.5 items-center">
                        <p className="text-secondary-text-color font-normal text-xs md:text-sm">حساب کاربری ندارید؟</p>
                        <Link to="/auth/register">
                            <p className="text-primary-color font-bold text-xs md:text-sm cursor-pointer">ثبت نام کنید</p>
                        </Link>
                    </div>
                </div>
                <div className="flex flex-col gap-y-[25px] mt-9 mb-[42px]">
                    <Controller control={control} name="username" render={({ field }) => (
                        <div>
                            <Input type="number" placeholder="نام کاربری" field={field} />
                            <ErrorComponent show={errors.username} message={errors.username?.message} />
                        </div>
                    )} />
                    <Controller control={control} name="password" render={({ field }) => (
                        <div>
                            <Input type="password" placeholder="رمز عبور" field={field} />
                            <ErrorComponent show={errors.password} message={errors.password?.message} />
                        </div>
                    )} />
                    <Link to="/auth/forgot-password"><p className="font-medium text-sm text-secondary-text-color cursor-pointer">فراموشی رمز عبور</p></Link>
                </div>
                <div className="flex flex-col gap-y-[27px] items-center">
                    <ButtonComponent type="submit" title="ثبت" pending={isPending} />
                    <Link to="/auth/login-with-code"><p className="font-medium text-base text-primary-color cursor-pointer">ورود با رمز یکبار مصرف</p></Link>
                </div>
            </div>
        </form>
    )
}