import { Button } from "@headlessui/react"
import { Input } from "../common/input"
import { useMutation } from "@tanstack/react-query"
import { checkIMEI } from "../../services/api/imei"
import { ButtonComponent } from "../common/button"
import { Controller, SubmitHandler, useForm } from "react-hook-form"
import { CheckIMEI } from "../../types"
import { yupResolver } from "@hookform/resolvers/yup"
import { checkIMEISchema } from "../../schema"
import { ErrorComponent } from "../common/error"
import toast from "react-hot-toast"
import { handleError } from "../../utility/error-handle"

export const Imei = () => {
    const {
        handleSubmit,
        formState: { errors },
        control
    } = useForm<CheckIMEI>({
        resolver: yupResolver(checkIMEISchema)
    })
    const { mutate, isPending } = useMutation({
        mutationFn: checkIMEI,
        mutationKey: ["IMEI"]
    })
    const handleCheckIMEI: SubmitHandler<CheckIMEI> = async (data) => {
        await mutate(data, {
            onSuccess: (res: any) => {
                toast.success("کد IMEI معتبر است")
            },
            onError: (err: any) => handleError(err)
        })
    }
    return (
        <form onSubmit={handleSubmit(handleCheckIMEI)} className="w-full flex flex-col lg:flex-row bg-auth-form p-[30px] rounded-[40px] gap-8">
            <div className="w-full h-full flex items-center justify-center">
                <img src="/svgs/dashboard/binary.svg" alt="binary" className="size-full max-w-[500px] max-h-[500px]" />
            </div>
            <div className="flex flex-col w-full gap-10 justify-center lg:justify-between">
                <Controller control={control} name="IMEI" render={({ field }) => (
                    <div className="flex flex-col !gap-0">
                        <Input placeholder="کد IMEI" type="text" field={field} />
                        <ErrorComponent show={errors?.IMEI} message={errors?.IMEI?.message} />
                    </div>
                )} />
                <p className="font-normal text-base text-primary-text-color text-justify lg:text-wrap">
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز
                </p>
                <div className="w-full flex justify-end">
                    <ButtonComponent title="ثبت کد" className="w-full min-w-full xl:min-w-min xl:max-w-60" pending={isPending} type="submit" />
                </div>
            </div>
        </form>
    )
}