import React, {useContext, useEffect, useRef, useState} from 'react';
import {Box, Input, Radio, RadioGroup, Select, SimpleGrid, Stack, Textarea, UnorderedList} from "@chakra-ui/react";
import {
    MDBBtn, MDBCol, MDBContainer,
    MDBFile,
    MDBRadio,
    MDBInputGroup,
    MDBInputGroupText, MDBRow
} from "mdb-react-ui-kit";
import {FcApproval} from "react-icons/fc";
import {FiCheck, FiUser} from "react-icons/fi";
import {useForm} from "react-hook-form";
import {HandleFormReq} from "../../../../lib/HandleFormReq";
import axios from "axios";

const PersonData = () => {
    const {setPage, personData, setpersondata} = useContext(HandleFormReq)
    const [sex, setSex] = useState(personData.gender)
    const [health, setHealth] = React.useState(personData.health)
    const {register, handleSubmit, watch, formState: { errors }} = useForm()
    let hasErr = Object.keys(errors).length
    const onSubmit = async (data) => {
        console.log('dadadada', data)
        if (hasErr === 0) {
            console.log('om', data.national_code)
            axios.post('https://mehriranianco.ir/api/public/jobrequest/nationalcode', {
                nationalcode: data.national_code
            }).then((res) => {
                if (res.data.status === false) {
                    alert('کد ملی شما قبلا ثبت شده ')
                }else {
                    setpersondata(data)
                    setPage(2)
                }
            }).catch((err) => {
                console.log('44324589091',err)
            })


            console.log('jsondataperson', JSON.stringify({ personData: personData, scc: personData }))
        }
        else {
            alert('مقادیر وارد شده معبتر نمی باشد')
        }
    };
    console.log('personData.lastname', typeof personData.lastname)
    return (
        <div>
            <form onSubmit={handleSubmit(onSubmit)} id={'persondataform'}>
                <SimpleGrid className={'mt-4'} dir={'rtl'} columns={[1, 1, 4]} spacing={3}>
                    <Box>
                        <div>
                            <MDBInputGroup className='mb-3 flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0'}>
                                        <FiUser />
                                    </MDBInputGroupText>
                                    <Input
                                        id='firstname'
                                        defaultValue={personData.firstname}
                                        {...register('firstname', {required: true, maxLength: 100})}
                                        className={'bk-med  rounded-0'}
                                        style={{ height: 40 }}
                                        dir={'rtl'}
                                        type='text'
                                        placeholder="نام خود را وارد کنید  "
                                    />
                                </div>
                                <p className={'mt-1 text-sm text-danger'}>
                                    {errors?.firstname?.type === "required" && <p> وارد کردن نام اجباری است</p>}
                                    {errors?.firstname?.type === "maxLength" && <p>نام وارد شده معبتر نمی باشد</p>}
                                </p>
                            </MDBInputGroup>
                        </div>
                    </Box>
                    <Box>
                        <div>
                            <MDBInputGroup className='mb-3 flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0'}>
                                        <FiUser />
                                    </MDBInputGroupText>
                                    <Input
                                        id='lastname'
                                        defaultValue={personData.lastname}
                                        {...register('lastname', {required: true})}
                                        className={'bk-med rounded-0'}
                                        style={{ height: 40 }}
                                        dir={'rtl'}
                                        type='text'
                                        placeholder="نام خانوادگی خود را وارد کنید  "
                                    />

                                </div>
                                <p className={' mt-1 text-sm text-danger'}>
                                    {errors?.lastname?.type === "required" && <p> وارد کردن نام خانوادگی اجباری است</p>}
                                </p>
                            </MDBInputGroup>
                        </div>
                    </Box>
                    <Box>
                        <div>
                            <MDBInputGroup className='mb-3 flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0'}>
                                        <FiUser />
                                    </MDBInputGroupText>
                                    <Input
                                        id='fatherName'
                                        defaultValue={personData.fatherName}
                                        {...register('fatherName', {required: true})}
                                        className={'bk-med rounded-0'}
                                        style={{ height: 40 }}
                                        dir={'rtl'}
                                        type='text'
                                        placeholder="نام پدر خود را وارد کنید  "
                                    />
                                </div>
                                <p className={' mt-1 text-sm text-danger'}>
                                    {errors?.fatherName?.type === "required" && <p> وارد کردن نام پدر اجباری است</p>}
                                </p>
                            </MDBInputGroup>
                        </div>
                    </Box>
                    <Box>
                        <div>
                            <MDBInputGroup className='mb-3 flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0'}>
                                        <FiUser />
                                    </MDBInputGroupText>
                                    <Input
                                        id='wifeJob'
                                        defaultValue={personData.wifeJob}
                                        {...register('wifeJob')}
                                        className={'bk-med rounded-0'}
                                        style={{ height: 40 }}
                                        dir={'rtl'}
                                        type='text'
                                        placeholder="شغل همسر خود را وارد کنید  "
                                    />
                                </div>
                                {/*<p className={' mt-1 text-sm text-danger'}>*/}
                                {/*    {errors?.wifeJob?.type === "required" && <p> وارد کردن شغل همسر  اجباری است</p>}*/}
                                {/*</p>*/}
                            </MDBInputGroup>
                        </div>
                    </Box>
                    <Box>
                        <div>
                            <MDBInputGroup className='mb-3 flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0'}>
                                        <FiUser />
                                    </MDBInputGroupText>
                                    <Input
                                        id='childIndex'
                                        defaultValue={personData.childIndex}
                                        {...register('childIndex' )}
                                        className={'bk-med rounded-0'}
                                        style={{ height: 40 }}
                                        dir={'rtl'}
                                        type='text'
                                        placeholder="تعداد فرزندان  خود را وارد کنید  "
                                    />
                                </div>
                                {/*<p className={' mt-1 text-sm text-danger'}>*/}
                                {/*    {errors?.childIndex?.type === "required" && <p> وارد کردن شغل همسر  اجباری است</p>}*/}
                                {/*</p>*/}
                            </MDBInputGroup>
                        </div>
                    </Box>
                    <Box>
                        <div>
                            <MDBInputGroup className='mb-3 flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0'}>
                                        <FiUser />
                                    </MDBInputGroupText>
                                    <Input
                                        id='dependants'
                                        defaultValue={personData.dependants}
                                        {...register('dependants')}
                                        className={'bk-med rounded-0'}
                                        style={{ height: 40 }}
                                        dir={'rtl'}
                                        type='text'
                                        placeholder="تعداد افراد تحت تکلف  خود را وارد کنید  "
                                    />
                                </div>
                                {/*<p className={' mt-1 text-sm text-danger'}>*/}
                                {/*    {errors?.dependants?.type === "required" && <p> وارد کردن شغل همسر  اجباری است</p>}*/}
                                {/*</p>*/}
                            </MDBInputGroup>
                        </div>
                    </Box>
                    <Box>
                        <div>
                            <MDBInputGroup className='mb-3 flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0'}>
                                        <FiUser />
                                    </MDBInputGroupText>
                                    <Input
                                        id='Insurance'
                                        defaultValue={personData.Insurance}
                                        {...register('Insurance', {required: true})}
                                        className={'bk-med rounded-0'}
                                        style={{ height: 40 }}
                                        dir={'rtl'}
                                        type='text'
                                        placeholder="وضعیت بیمه خود را وارد کنید  "
                                    />
                                </div>
                                <p className={' mt-1 text-sm text-danger'}>
                                    {errors?.Insurance?.type === "required" && <p> وارد کردن وضعیت بیمه  اجباری است</p>}
                                </p>
                            </MDBInputGroup>
                        </div>
                    </Box>
                    <Box>
                        <div>
                            <MDBInputGroup className='mb-3 flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0'}>
                                        <FiUser />
                                    </MDBInputGroupText>
                                    <Input
                                        id='national_code'
                                        defaultValue={personData.national_code}
                                        {...register('national_code', {required: true, maxLength: 10, minLength: 10})}
                                        className={'bk-med rounded-0'}
                                        style={{ height: 40 }}
                                        dir={'rtl'}
                                        type='number'
                                        placeholder=" کد ملی  خود را وارد کنید  "
                                    />

                                </div>
                                <p className={' mt-1 text-sm text-danger'}>
                                    {errors?.national_code?.type === "required" && <p> وارد کردن  کد ملی  اجباری است</p>}
                                    {errors?.national_code?.type === "maxLength" && <p>کد ملی وارد شده معبتر نمی باشد</p>}
                                    {errors?.national_code?.type === "minLength" && <p>کد ملی وارد شده معبتر نمی باشد</p>}
                                </p>
                            </MDBInputGroup>
                        </div>
                    </Box>
                    <Box>
                        <div>
                            <MDBInputGroup className='mb-3 flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0'}>
                                        <FiUser />
                                    </MDBInputGroupText>
                                    <Input
                                        id='placenational'
                                        defaultValue={personData.placenational}
                                        {...register('placenational', {required: true})}
                                        className={'bk-med rounded-0'}
                                        style={{ height: 40 }}
                                        dir={'rtl'}
                                        type='text'
                                        placeholder="محل صدور شناسنامه  خود را وارد کنید  "
                                    />

                                </div>
                                <p className={' mt-1 text-sm text-danger'}>
                                    {errors?.placenational?.type === "required" && <p> وارد کردن  محل صدور شناسانه   اجباری است</p>}
                                </p>
                            </MDBInputGroup>
                        </div>
                    </Box>
                    <Box>
                        <div>
                            <MDBInputGroup className='mb-3 flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0'}>
                                        <FiUser />
                                    </MDBInputGroupText>
                                    <Input
                                        id='PHONE'
                                        defaultValue={personData.phone}
                                        {...register('phone', {required: true})}
                                        className={'bk-med rounded-0'}
                                        style={{ height: 40 }}
                                        dir={'rtl'}
                                        type='text'
                                        placeholder="تلفن ثابت   خود را وارد کنید  "
                                    />

                                </div>
                                <p className={' mt-1 text-sm text-danger'}>
                                    {errors?.phone?.type === "required" && <p> وارد کردن  تلفن ثابت  اجباری است</p>}
                                </p>
                            </MDBInputGroup>
                        </div>
                    </Box>
                    <Box>
                        <div>
                            <MDBInputGroup className='mb-3 flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0'}>
                                        <FiUser />
                                    </MDBInputGroupText>
                                    <Input
                                        id='mobile_number'
                                        defaultValue={personData.mobile_number}
                                        {...register('mobile_number', {required: true, maxLength: 11, minLength: 11})}
                                        className={'bk-med rounded-0'}
                                        style={{ height: 40 }}
                                        dir={'rtl'}
                                        type='number'
                                        placeholder=" شماره موبایل   خود را وارد کنید  "
                                    />

                                </div>
                                <p className={' mt-1 text-sm text-danger'}>
                                    {errors?.mobile_number?.type === "required" && <p> وارد کردن   شماره موبایل   اجباری است</p>}
                                    {errors?.mobile_number?.type === "maxLength" && <p>شماره موبایل  وارد شده معبتر نمی باشد</p>}
                                    {errors?.mobile_number?.type === "minLength" && <p>شماره موبایل  وارد شده معبتر نمی باشد</p>}
                                </p>
                            </MDBInputGroup>
                        </div>
                    </Box>
                    <Box>
                        <div>
                            <MDBInputGroup className='mb-3 flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0'}>
                                        <FiUser />
                                    </MDBInputGroupText>
                                    <Input
                                        id='birthday'
                                        defaultValue={personData.birthday}
                                        {...register('birthday', {required: true})}
                                        className={'bk-med rounded-0'}
                                        style={{ height: 40 }}
                                        dir={'rtl'}
                                        type='number'
                                        placeholder=" سال  تولد  خود را وارد کنید "
                                    />

                                </div>
                                <p className={' mt-1 text-sm text-danger'}>
                                    {errors?.birthday?.type === "required" && <p> وارد کردن   تاریخ تولد   اجباری است</p>}
                                </p>
                            </MDBInputGroup>
                        </div>
                    </Box>
                    {/*////*/}

                    <SimpleGrid className={'mt-2 flex justify-content-between'} dir={'rtl'} columns={[1,1,2]} spacingX='390px' spacingY='20px'>
                        <Box>
                            <MDBInputGroup className='flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0 border-0'}>
                                        جنسیت :
                                    </MDBInputGroupText>
                                    <div>
                                        <Select
                                            dir={'ltr'}
                                            {...register('gender')}
                                            defaultValue={personData.gender}
                                            style={{ width: 200 }}
                                            onChange={(e) => setSex(e.target.value)}
                                            >
                                            <option value='1'> مرد </option>
                                            <option value='2'> زن </option>
                                        </Select>
                                    </div>
                                </div>
                                <p className={' mt-1 text-sm text-danger'}>
                                    {errors?.gender?.type === "required" && <p> وارد کردن  نظام وظیفه اجباری است</p>}
                                </p>
                            </MDBInputGroup>
                        </Box>
                        <Box>
                            <MDBInputGroup>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0 border-0'}>
                                        وضعیت  تحصیل  :
                                    </MDBInputGroupText>
                                    <div>
                                        <Select
                                            dir={'ltr'}
                                            defaultValue={personData.degree}
                                            style={{ width: 200 }}
                                            {...register('degree', {required: true})}
                                            >
                                            <option value='0'> زیر دیپلم  </option>
                                            <option value='1'> دیپلم </option>
                                            <option value='5'> فوق دیپام  </option>
                                            <option value='2'>  لیسانس  </option>
                                            <option value='3'> فوق لیسانس  </option>
                                            <option value='4'>  دکتری  </option>
                                        </Select>
                                    </div>
                                </div>
                                <p className={' mt-1 text-sm text-danger'}>
                                    {errors?.degree?.type === "required" && <p> وضعیت تحصیل را مشخص کنید</p>}
                                </p>
                            </MDBInputGroup>
                        </Box>
                        <Box>
                            <MDBInputGroup>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0 border-0'}>
                                        وضعیت تاهل :
                                    </MDBInputGroupText>
                                    <div>
                                        <Select
                                            defaultValue={personData.marital}
                                            style={{ width: 200 }}
                                            dir={'ltr'}
                                            {...register('marital', {required: true})}
                                            >
                                            <option value='1'> مجرد </option>
                                            <option value='2'> متاهل </option>
                                        </Select>
                                    </div>
                                </div>
                                <p className={' mt-1 text-sm text-danger'}>
                                    {errors?.marital?.type === "required" && <p> وضعیت تاهل را مشخص کنید </p>}
                                </p>
                            </MDBInputGroup>
                        </Box>
                        <Box>
                            {sex === '1' ? (
                                <MDBInputGroup className='mb-3 flex'>
                                    <div className={'flex align-items-center'}>
                                        <MDBInputGroupText className={'rounded-0 border-0'}>
                                            وضعیت نظام وظیفه  :
                                        </MDBInputGroupText>
                                        <div className="form-check">
                                            <Select
                                                dir={'ltr'}
                                                defaultValue={personData.military}
                                                className={'form-select'}
                                                style={{ width: 200 }}
                                                {...register('military', {required: true})}
                                                placeholder=' وضعیت خدمت '>
                                                <option value='1'> معافیت </option>
                                                <option value='2'> مشمول </option>
                                                <option value='3'> پایان خدمت </option>
                                            </Select>
                                        </div>
                                    </div>
                                   <div style={{ width: 500 }} className={'mt-2 d-inline'}>
                                       <p style={{ width: 500 }} className={' text-sm text-danger'}>
                                           {errors?.military?.type === "required" && <p> وضعیت سربازی را مشخص کنید</p>}
                                       </p>
                                   </div>
                                </MDBInputGroup>
                            ): ''}
                        </Box>
                        <Box>
                            <MDBInputGroup style={{ flexDirection: "column" }} className='mb-3 flex'>
                                <div style={{display: "flex" ,flexDirection: "column" }} className={'flex align-items-center align-items-center flex-row flex-lg-row flex-md-row flex-sm-column'}>
                                    <MDBInputGroupText className={'rounded-0 border-0'}>
                                        سابقه بیماری    :
                                    </MDBInputGroupText>
                                    <RadioGroup defaultValue={personData.health}  {...register('health', {required: false})} className={'flex align-items-center flex-row flex-lg-row flex-md-row flex-sm-column'} onChange={setHealth} value={health}>
                                        <div>
                                            <Stack spacing={4} direction='row'>
                                                <Radio value='1'> ندارم </Radio>
                                                <Radio value='2'> دارم </Radio>
                                            </Stack>
                                        </div>
                                    </RadioGroup>


                                </div>
                                <div>
                                    {health === '2' && (
                                        <div className={'flex mt-sm-2 align-items-center justify-content-center'}>
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <Input
                                                id='healthreason'
                                                defaultValue={personData.healthreason}
                                                {...register('healthreason', {required: health === '2'})}
                                                className={'bk-med m-2 rounded-0'}
                                                style={{ height: 40, width:250 }}
                                                dir={'rtl'}
                                                type='text'
                                                placeholder="نوع بیماری خود را وارد کنید "
                                            />
                                            <div>
                                                <p style={{ width: 400 }} className={'text-sm text-danger'}>
                                                    {errors?.healthreason?.type === "required" && <p>  نوع بیماری خود را وارد کنید </p>}
                                                </p>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </MDBInputGroup>
                        </Box>
                    </SimpleGrid>

                    {/*////*/}
                </SimpleGrid>
                <Box className={'flex flex-col justify-content-center'}>
                    <MDBInputGroup className='mb-3 border-2'>
                        <Textarea
                            defaultValue={personData.address}
                            {...register('address',{required: true})}
                            dir={'rtl'} placeholder='آدرس محل سکونت خود را وارد کنید    ' />
                    </MDBInputGroup>
                    <p className={' mt-1 text-sm text-danger'}>
                        {errors?.address?.type === "required" && <p> آدرس محلص سکونت خود را وراد کنید </p>}
                    </p>
                </Box>

                <MDBBtn  type={'submit'} size={'sm'} className={'mt-2 bg-primary-teal'}  >مرحله بعد</MDBBtn>
            </form>


        </div>
    );
};

export default PersonData;