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'
import { AppProduction } from '../../../../lib/api'

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) {
      axios
        .post(`${AppProduction}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