'use client'

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import Link from 'next/link'
import { useForm, SubmitHandler } from "react-hook-form"
import axios, {AxiosInstance, AxiosResponse} from "axios";
import {useState} from "react";
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"

import {useRouter} from "next/navigation";
import Image from "next/image";

type Inputs = {
    mobile: number
}

const Page = ()=>{

    const router = useRouter()

    const [errorMessage, setErrorMessage] = useState<string | null>(null)

    const {
        register,
        handleSubmit,
        watch,
        formState: { errors },
    } = useForm<Inputs>()
    const onSubmit: SubmitHandler<Inputs> = async (data) => {

        try {
            setErrorMessage(null)
            const result: AxiosResponse = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/auth/mojri/mobile/`,data)
            if (result.status === 200) {
                router.push(`/login/${data.mobile}/`)
            } else {
                setErrorMessage("خطا در ارسال کد ورورد")
            }
        } catch (e: any) {
            setErrorMessage("شماره موبایل صحیح نیست!")
        }

    }


    return (
        <div className="bg-slate-200 h-screen pt-4">
            <div className="drop-shadow-md flex flex-col w-[90%] md:w-[400px] m-auto p-4 bg-white rounded-lg">

                <div className="flex flex-col mb-8 text-center items-center justify-center">

                    <Image src={'/logo.png'} width={200} height={100} alt={'a'}/>


                </div>

                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-y-2">

                    <div>
                        <Label>
                            شماره موبایل
                            <Input type={'text'} {...register("mobile", {
                                required: "شماره موبایل الزامی است",
                                pattern: {
                                    value: /^(\+98|0)?9\d{9}$/,
                                    message: "شماره موبایل وارد شده صحیح نیست"
                                }
                            })}/>
                        </Label>
                        <p className={'text-sm mt-1'}>{errors?.mobile?.message}</p>
                    </div>


                    <div className="text-center">
                        <Button className="bg-blue-600">ارسال کد ورود</Button>
                    </div>

                    <p>{errorMessage}</p>

                </form>

                <div className="border-b-[1px] border-slate-200 mt-4 mb-4"></div>

                <div className="flex flex-col gap-y-2">

                    <p className="text-center text-xs">در صورتی که هنوز عضو نیستید ابتدا ثبت نام کنید</p>

                    <div className="text-center">
                        <Link href="/register" className="bg-red-800 text-xs p-[0.4rem] m-0 rounded-md text-white">ثبت نام در باشگاه</Link>
                    </div>

                </div>

                
            </div>

            <div className={'flex flex-row justify-center'}>
                <Popover>
                    <PopoverTrigger className={'text-center m-auto'}>
                        <p className={'text-center text-gray-500 text-sm mt-2 underline'}>
                            برنامه نویسی و توسعه: واحد فناوری اطلاعات (محمد جواد فصاحت)
                        </p>
                    </PopoverTrigger>
                    <PopoverContent className={'text-center text-sm m-auto'}>
                        تلفن تماس : 09202202129
                    </PopoverContent>
                </Popover>
            </div>


        </div>

    )
}

export default Page;