import OTPInput from "react-otp-input"
import { Link } from "react-router-dom"
import { ErrorComponent } from "../common/error"
import { Controller, SubmitHandler, useForm } from "react-hook-form"
import { Button } from "@headlessui/react"
import { LoginCodeInterface } from "../../types"
import { yupResolver } from "@hookform/resolvers/yup"
import { LoginCodeSchema } from "../../schema"

export const SendCodeForm = () => {
    const { handleSubmit, formState: { errors }, control } = useForm<LoginCodeInterface>({
        resolver: yupResolver(LoginCodeSchema)
    })
    const submitCode: SubmitHandler<LoginCodeInterface> = async (data) => {
        console.log("data=>", data)
    }
    return (
        <form onSubmit={handleSubmit(submitCode)}
            className="w-fit 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">
                <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">
                        <div className="flex flex-col sm:flex-row gap-0.5 items-center">
                            <p className="text-secondary-text-color font-normal text-xs md:text-sm">کد تایید ارسال شده به شماره 09376225448 را وارد کنید.</p>
                            <Link to="/auth/login-with-code">
                                <p className="text-primary-color font-bold text-xs md:text-sm cursor-pointer">ویرایش</p>
                            </Link>
                        </div>
                    </div>
                </div>
                <div className="mt-9 mb-[42px] flex w-full justify-center items-center" id="otp">
                    <Controller control={control} name="code" render={({ field }) => (
                        <div>
                            <OTPInput
                                containerStyle="otp-container"
                                {...field}
                                numInputs={5}
                                renderInput={(props) => <input {...props} />}
                                inputStyle="otp-inputs"
                            />
                            <ErrorComponent show={errors.code} message={errors.code?.message} />
                        </div>
                    )} />

                </div>
                <div className="flex flex-col gap-y-[27px] items-center">
                    <p className="font-normal text-secondary-text-color text-base">30 ثانیه دیگر تا دریافت کد</p>
                    <Button type="submit">تایید</Button>
                    <p className="font-medium text-base text-primary-color">ارسال مجدد</p>
                </div>
            </div>
        </form>
    )
}