'use client'

import { Fragment, useState } from "react"
import { useRouter } from 'next/navigation'
import { useDispatch } from 'react-redux'
import { addMobile } from "@/app/redux/features/mobileoptSlice"


const Page = ()=>{
    const [username, setUserName] = useState()
    const [password, setPassword] = useState()

    const router = useRouter()
    const dispatch = useDispatch()

    const onChangeMobile = (e:any)=>{
        setUserName(e.target.value)
    }

    const login = async ()=>{

        const res = await fetch('http://127.0.0.1:8000/auth/login/mobile/', {
            method: "POST",
            cache: 'no-store',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                mobile: username
            })
        },)

        console.log(res)

        const data = await res.json();

        console.log(data)

        dispatch( addMobile(data.result.mobile) )

        if (data.result.message == 'opt code send'){
            router.push('/login/verify/')
        }
    }

    return (
        <Fragment>
            <div className="mx-auto w-full sm:w-[30rem] mt-[-10rem]">
                <div className="flex flex-col gap-y-2 pr-8 pl-8">

                    <h1 className="text-center border-b-2 border-black pb-4 text-2xl">ورود به سامانه مشتریان</h1>

                    <div className="mt-5">
                        <label for="UserEmail" class="block text-md font-medium text-gray-700">
                            موبایل
                        </label>

                        <input
                            type="email"
                            id="UserEmail"
                            placeholder="شماره موبایل را وارد کنید"
                            onChange={(e)=>{ onChangeMobile(e) }}
                            className="mt-1 w-full h-[45px] p-5 rounded-md border-gray-200 shadow-sm sm:text-sm"
                        />
                    </div>

                    <input onClick={()=>{ login() }} type="submit" className="bg-slate-900 text-white rounded p-2" value={"ورود"} />

                </div>
            </div>
        </Fragment>
    )
}

export default Page