'use client'
// import react-hook-from
import {useForm, SubmitHandler} from "react-hook-form";
import {Input} from "@/components/ui/input";
import {Label} from "@/components/ui/label";
import {useProjectCodeMutation} from "@/queries/projectcode";

type Inputs = {
    title: string
    count: number
}

const Page = ()=>{

    const {register, handleSubmit, control, formState: { errors },} = useForm<Inputs>();

    const {mutate: createProjectCode, data:project_code, isError, isSuccess, isPending} = useProjectCodeMutation()

    const onSubmit:SubmitHandler<Inputs> = (data)=>{
        createProjectCode(data)
    }

    return (
        <div className={"flex flex-row gap-2 items-center justify-center m-auto w-[35%]"}>

            <form className={'w-full flex flex-col gap-y-2'} onSubmit={handleSubmit(onSubmit)}>
                <Label>
                    عنوان
                    <Input className={'mt-1'} type={"text"} {...register("title", {
                        required: {
                            value: true,
                            message: 'عنوان ضروری است'
                        },
                        minLength: {
                            value: 3,
                            message: 'عنوان مناسب وارد کنید'
                        },
                    })}/>
                </Label>

                <p className={'text-red-500'}>{errors.title?.message}</p>

                <Label>
                    تعداد
                    <Input className={'mt-1'} type={"text"} {...register("count", {
                        required: {
                            value: true,
                            message: 'تعداد ضروری است'
                        },
                        pattern: {
                            value: /^[0-9]+$/,
                            message: 'فقط عدد وارد کنید'
                        }
                    })}/>
                </Label>
                <p className={'text-red-500'}>{errors.count?.message}</p>

                { !isPending && !isSuccess ? (
                    <input value={'تولید کد'} className={'bg-gray-800 text-white text-center rounded p-1'} type="submit"/>
                ) : null}

            </form>

        </div>
    )
}

export default Page;