import React, {useState} from 'react'
import AppContainer from '../../appContainer'
import {MDBBtn, MDBCard, MDBCardBody, MDBCardText, MDBCardTitle, MDBInput} from "mdb-react-ui-kit";
import {Input, ListItem, UnorderedList} from "@chakra-ui/react";
import {useForm} from "react-hook-form";
import axios from "axios";
import Link from 'next/link'
import {AppProduction} from "../../../lib/api";

const InquiryJob = () => {
    const {register, handleSubmit, formState: {errors}} = useForm();
    const [loading, setLoading] = useState(false)
    const [result, setResult] = useState(null)
    const onSubmit = data => {
        setLoading(true)
        axios.post(`${AppProduction}public/job-request/inquiry`, data).then(res => {
            console.log('res', res)
            if (res.status == 208) {
                alert(res.data.status.message)
            }
            if(res.status == 200) {
                setResult(res.data)
            }
            setLoading(false)
        }).catch(err => {
            console.log('err', err)
            setLoading(false)
        })
    };
    return (
        <AppContainer title='استعلام وضعیت درخواست استخدام '>
            <div dir="rtl" className='bk-bold flex inquiry-bg justify-content-center align-items-center'>
                <MDBCard className="shadow-6-strong lg:w-[40%] my-[10rem]">
                    {!result ? (
                        <MDBCardBody>
                            <MDBCardTitle tag={'h4'} className="text-right my-3 text-primary-teal bk-heavy"> وضعیت درخواست
                                استخدام
                            </MDBCardTitle>
                            <form onSubmit={handleSubmit(onSubmit)}>
                                <MDBCardText className="flex flex-column gap-2">
                                    <Input
                                        maxLength="10"
                                        {...register('national_code', {
                                            required: {
                                                message: 'کد ملی اجباری است.'  ,
                                                value: true
                                            },
                                            minLength: {
                                                message: 'کد ملی معتبر نیست ',
                                                value: 10
                                            },
                                        })}
                                        variant='filled'
                                        placeholder='کد ملی را وارد نمایید.'
                                    />
                                    <Input
                                        maxLength="11"
                                        {...register('phone_number', {
                                            required: {
                                                message: ' شماره موبایل  اجباری است.'  ,
                                                value: true
                                            },
                                            minLength: {
                                                message: 'شماره موبایل  معتبر نیست ',
                                                value: 11
                                            },
                                        })}
                                        variant='filled'
                                        placeholder=' شماره موبایل را وارد نمایید.'
                                    />
                                </MDBCardText>
                                {errors.national_code && (
                                    <p className="text-danger">
                                        {errors.national_code.message}
                                    </p>
                                )}
                                {errors.phone_number && (
                                    <p className="text-danger">
                                        {errors.phone_number.message}
                                    </p>
                                )}

                                <MDBBtn disabled={loading} type="submit" className="left-align left bg-primary-teal">
                                    {loading ?   'در حال بررسی'   : 'استعلام وضعیت'}
                                </MDBBtn>
                            </form>
                        </MDBCardBody>
                    ): (
                        <MDBCardBody className="text-center">
                            <h4 className="text-primary-teal"> {result.status.name} </h4>
                            <hr />
                            <UnorderedList>
                                <ListItem  className="text-primary-teal bk">    تعیین وضعیت نشده است.</ListItem>
                            </UnorderedList>
                            <Link href="/recruitment">
                                <MDBBtn onClick={() => {
                                    setLoading(false)
                                    setLoading(null)
                                }} className="left-align left bg-primary-teal"> بازگشت</MDBBtn>
                            </Link>
                        </MDBCardBody>
                    )}
                </MDBCard>
            </div>
        </AppContainer>
    )
}

export default InquiryJob