import React, { Suspense, useMemo, useState } from 'react'
import { useForm } from 'react-hook-form'
import { Alert, AlertDescription, AlertIcon, AlertTitle, Checkbox, useDisclosure } from '@chakra-ui/react'
import AppContainer from '../../../appContainer'
import { MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBContainer, MDBSpinner } from 'mdb-react-ui-kit'
import {
  Box,
  Divider,
  ListItem,
  Progress,
  SimpleGrid,
  SlideFade,
  Text,
  UnorderedList,
  Button,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalCloseButton,
  ModalBody,
  ModalFooter
} from '@chakra-ui/react'
import { FiUser, FiCheck } from 'react-icons/fi'
import { FcApproval } from 'react-icons/fc'
import Employer from '../../../../public/resource/icons/portfolio-outline.png'
import axios from 'axios'
import { HandleFormReq } from '../../../../lib/HandleFormReq'
import PersonData from './PersonData'
import EducationalData from './EducationalData'
import CoursesData from './CoursesData'
import JobData from './JobData'
import ScientificData from './ScientificData'
import PcSkill from './PcSkill'
import Furtherinformation from './Furtherinformation'
import log from 'tailwindcss/lib/util/log'
import { AppProduction } from '../../../../lib/api'

const requestForm = SelectedJob => {
  console.log('sdsds', SelectedJob.SelectedJob.data)
  const { isOpen, onOpen, onClose } = useDisclosure()
  const [loading, setLoading] = useState(false)
  const [ShowSuccess, seShowSuccess] = useState(false)
  const [CheckCode, setCheckCode] = useState()
  const [page, setPage] = useState(1)
  const [personData, setpersondata] = useState({
    Insurance: '',
    address: '',
    birthday: '',
    childIndex: '',
    degree: '',
    healthreason: '',
    health: '1',
    dependants: '',
    fatherName: '',
    firstname: '',
    gender: '2',
    lastname: '',
    marital: '',
    mobile_number: '',
    national_code: '',
    phone: '',
    placenational: '',
    wifeJob: ''
  })
  const [educationalData, setEducationalData] = useState([
    {
      university: '',
      field: '',
      trend: '',
      score: '',
      dateField: ''
    }
  ])
  const [coursesData, setCoursesData] = useState([
    {
      courseName: '',
      courseEdu: '',
      courseLocal: '',
      courseTime: ''
    }
  ])
  const [langStatus, setLangStatus] = useState({
    status: 0
  })
  const [jobData, setJob] = useState([
    {
      companyName: '',
      position: '',
      workTime: '',
      exitReason: '',
      lastIncome: ''
    }
  ])
  const [scientificData, setScientificData] = useState({
    text: ''
  })
  const [pcSkillData, setPcSkillData] = useState({
    text: '',
    icdlLevel: 2
  })
  const [furtherinformation, setFurtherinformation] = useState({
    criminal: '1',
    salary: '',
    Introduced: ''
  })
  const [isSubmitPersonData, setIsSubmitPersonData] = useState(false)
  const [iAgree, setAgree] = useState(true)
  const value = useMemo(
    () => ({
      page,
      setPage,
      personData,
      setpersondata,
      educationalData,
      setEducationalData,
      coursesData,
      setCoursesData,
      langStatus,
      setLangStatus,
      jobData,
      setJob,
      scientificData,
      setScientificData,
      pcSkillData,
      setPcSkillData,
      furtherinformation,
      setFurtherinformation
    }),
    [
      page,
      personData,
      educationalData,
      coursesData,
      langStatus,
      jobData,
      scientificData,
      pcSkillData,
      furtherinformation
    ]
  )
  const handleLastSubmit = () => {
    setLoading(true)
    axios
      .post(`${AppProduction}public/jobrequest`, {
        job_id: SelectedJob.SelectedJob.data.id,
        OccupationalJob_id: SelectedJob.SelectedJob.OccupationalJob.id,
        lastData: JSON.stringify({
          personData: personData,
          educationalData: educationalData,
          coursesData: { ...coursesData, langStatus },
          jobData: jobData,
          scientificData: scientificData,
          pcSkillData: pcSkillData,
          furtherinformation: furtherinformation
        })
      })
      .then(res => {
        setLoading(false)
        seShowSuccess(true)
        setCheckCode(res.data.code)
      })
      .catch(err => {
        console.log('err', err)
      })
  }

  return (
    <div>
      <AppContainer title={'فرصت های شغلی بیمارستان مهر  ایرانیان پرند'}>
        <div className={'w-100 p-5 bg-teal-grad'}>
          <div
            style={{ flexDirection: 'column' }}
            className={'flex lg:flex-row md:flex-col sm:flex-col justify-content-between items-center'}
          >
            <div className={'bg-white p-2 rounded-circle shadow-6-soft'}>
              <MDBCardImage width={50} src={Employer} />
            </div>
            <div className={'mt-4 w-full'}>
              <Text dir={'rtl'} className={'bk-med text-center text-white font-weight-bold '}>
                {' '}
                درخواست شغلی برای {SelectedJob.SelectedJob.data.title} - {SelectedJob.SelectedJob.OccupationalJob.title}
              </Text>
            </div>
          </div>
        </div>
        <MDBContainer className={'mt-5 mb-5'}>
          <SimpleGrid className={'mb-4'} columns={[1, 1, 2]} spacing={3}>
            <Box>
              <MDBCard border='primary' className={'border-black'}>
                <MDBCardBody dir={'rtl'}>
                  <MDBCardTitle className={'bk-med'}>
                    <FcApproval className={'ml-2'} />
                    توضیحات موقعیت شغلی
                  </MDBCardTitle>
                  <div className={'mt-4'}>
                    <UnorderedList className={'bk-light'}>
                      {SelectedJob.SelectedJob.data.details.map((items, index) => {
                        return [items].map((item, index) => <ListItem key={index}>{item}</ListItem>)
                      })}
                    </UnorderedList>
                  </div>
                </MDBCardBody>
              </MDBCard>
            </Box>
            <Box>
              <MDBCard border='primary' className={'border-black'}>
                <MDBCardBody dir={'rtl'}>
                  <MDBCardTitle className={'bk-med'}>
                    <FcApproval className={'ml-2'} />
                    نیازمندی های موقعیت شغلی
                  </MDBCardTitle>
                  <div className={'mt-4'}>
                    <UnorderedList className={'bk-light'}>
                      {SelectedJob.SelectedJob.data.requirement.map((items, index) => {
                        return [items].map((item, index) => <ListItem key={index}>{item}</ListItem>)
                      })}
                    </UnorderedList>
                  </div>
                </MDBCardBody>
              </MDBCard>
            </Box>
          </SimpleGrid>
          <Divider />
          <br />
          <HandleFormReq.Provider value={value}>
            <div id={'formConatiner'} className={'flex flex-row-reverse align-items-center'}>
              <div>
                {(() => {
                  switch (page) {
                    case 1:
                      return (
                        <SlideFade in={true}>
                          <div className={'flex'}>
                            <div
                              className={
                                'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft   '
                              }
                            >
                              <h3
                                className={
                                  'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'
                                }
                              >
                                اطلاعات فردی
                              </h3>
                            </div>
                            <div
                              className={
                                'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '
                              }
                            >
                              <FiUser className={'m-1 text-white'} size={20} />
                            </div>
                          </div>
                        </SlideFade>
                      )
                    case 2:
                      return (
                        <SlideFade in={true}>
                          <div className={'flex'}>
                            <div
                              className={
                                'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft   '
                              }
                            >
                              <h3
                                className={
                                  'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'
                                }
                              >
                                اطلاعات تحصیلی
                              </h3>
                            </div>
                            <div
                              className={
                                'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '
                              }
                            >
                              <FiUser className={'m-1 text-white'} size={20} />
                            </div>
                          </div>
                        </SlideFade>
                      )
                    case 3:
                      return (
                        <SlideFade in={true}>
                          <div className={'flex'}>
                            <div
                              className={
                                'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft   '
                              }
                            >
                              <h3
                                className={
                                  'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'
                                }
                              >
                                سوابق آموزشی
                              </h3>
                            </div>
                            <div
                              className={
                                'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '
                              }
                            >
                              <FiUser className={'m-1 text-white'} size={20} />
                            </div>
                          </div>
                        </SlideFade>
                      )
                    case 4:
                      return (
                        <SlideFade in={true}>
                          <div className={'flex'}>
                            <div
                              className={
                                'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft   '
                              }
                            >
                              <h3
                                className={
                                  'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'
                                }
                              >
                                سوابق شغلی
                              </h3>
                            </div>
                            <div
                              className={
                                'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '
                              }
                            >
                              <FiUser className={'m-1 text-white'} size={20} />
                            </div>
                          </div>
                        </SlideFade>
                      )
                    case 5:
                      return (
                        <SlideFade in={true}>
                          <div className={'flex'}>
                            <div
                              className={
                                'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft   '
                              }
                            >
                              <h3
                                className={
                                  'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'
                                }
                              >
                                سوابق علمی
                              </h3>
                            </div>
                            <div
                              className={
                                'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '
                              }
                            >
                              <FiUser className={'m-1 text-white'} size={20} />
                            </div>
                          </div>
                        </SlideFade>
                      )
                    case 6:
                      return (
                        <SlideFade in={true}>
                          <div className={'flex'}>
                            <div
                              className={
                                'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft   '
                              }
                            >
                              <h3
                                className={
                                  'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'
                                }
                              >
                                مهارت کار با کامپیوتر
                              </h3>
                            </div>
                            <div
                              className={
                                'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '
                              }
                            >
                              <FiUser className={'m-1 text-white'} size={20} />
                            </div>
                          </div>
                        </SlideFade>
                      )
                    case 7:
                      return (
                        <SlideFade in={true}>
                          <div className={'flex'}>
                            <div
                              className={
                                'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft   '
                              }
                            >
                              <h3
                                className={
                                  'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'
                                }
                              >
                                اطلاعات تکمیلی
                              </h3>
                            </div>
                            <div
                              className={
                                'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '
                              }
                            >
                              <FiUser className={'m-1 text-white'} size={20} />
                            </div>
                          </div>
                        </SlideFade>
                      )
                  }
                })()}
              </div>
            </div>
            <div className={'mt-5'}>
              <Progress dir={'rtl'} value={page * 14} size='xs' colorScheme='teal' />
            </div>
            {(() => {
              switch (page) {
                case 1:
                  return (
                    <SlideFade in={true}>
                      <PersonData />
                    </SlideFade>
                  )
                case 2:
                  return (
                    <SlideFade in={true}>
                      <EducationalData />
                    </SlideFade>
                  )
                case 3:
                  return (
                    <SlideFade in={true}>
                      <CoursesData />
                    </SlideFade>
                  )
                case 4:
                  return (
                    <SlideFade in={true}>
                      <JobData />
                    </SlideFade>
                  )
                case 5:
                  return (
                    <SlideFade in={true}>
                      <ScientificData />
                    </SlideFade>
                  )
                case 6:
                  return (
                    <SlideFade in={true}>
                      <PcSkill />
                    </SlideFade>
                  )
                case 7:
                  return (
                    <SlideFade in={true}>
                      {ShowSuccess === false ? (
                        <div>
                          <Furtherinformation />
                          <Checkbox onChange={() => setAgree(!iAgree)}>
                            اینجانب مسئولیت صحت کلیه اطلاعات ارائه شده در این فرم را پذیرفته و در صورت اثبات عدم صحت
                            موارد فوق الذکر شرکت مجاز به اتخاذ هر گونه تصمیم و برخورد قانونی می باشد .
                          </Checkbox>
                        </div>
                      ) : (
                        <Alert
                          status='success'
                          variant='subtle'
                          flexDirection='column'
                          alignItems='center'
                          justifyContent='center'
                          textAlign='center'
                          height='200px'
                        >
                          <AlertIcon boxSize='40px' mr={0} />
                          <AlertTitle className={'bk-med'} mt={4} mb={1} fontSize='lg'>
                            درخواست شما ثبت شد
                          </AlertTitle>
                          <AlertDescription dir={'rtl'} maxWidth='sm'>
                            کد درخواست شما جهت پیگیری : {CheckCode}
                          </AlertDescription>
                        </Alert>
                      )}
                    </SlideFade>
                  )
              }
            })()}
          </HandleFormReq.Provider>
          <div className={'mt-5'}>
            <div dir={'rtl'} className={'m-2 mt-2 mb-2 flex justify-content-between'}>
              {page > 1 && ShowSuccess === false ? (
                <MDBBtn color='danger' size={'sm'} className={'mt-2'} onClick={() => setPage(page - 1)}>
                  مرحله قبل
                </MDBBtn>
              ) : (
                ''
              )}

              {/*{page === 1 && page !== 5 ? (*/}
              {/*    (*/}
              {/*        <MDBBtn size={'sm'} className={'mt-2 bg-primary-teal'} onClick={() => setPage(page + 1)} >مرحله بعد</MDBBtn>*/}
              {/*    )*/}
              {/*): ''}*/}
            </div>
            <div className={'flex justify-content-center m-2'}>
              {page === 7 ? (
                <div>
                  {ShowSuccess === false && (
                    <MDBBtn
                      disabled={iAgree}
                      onClick={handleLastSubmit}
                      size={'lg'}
                      className={'mt-2 bk-med text-center bg-primary-teal'}
                    >
                      {loading === false ? (
                        '                                    ثبت در خواست استخدام'
                      ) : (
                        <div>
                          <div className={'flex align-items-center'}>
                            در حال ثبت درخواست
                            <MDBSpinner grow>
                              <span className='visually-hidden'>Loading...</span>
                            </MDBSpinner>
                          </div>
                        </div>
                      )}
                    </MDBBtn>
                  )}
                </div>
              ) : (
                ''
              )}
            </div>
          </div>
        </MDBContainer>
      </AppContainer>
    </div>
  )
}

export async function getServerSideProps(ctx) {
  // Fetch data from external API
  const { query } = ctx
  const res = await axios
    .get(`${AppProduction}public/selectJob/${query.pos_id}`)
    .then(res => {
      return res.data
    })
    .catch(err => {
      console.log(err)
    })
  const SelectedJob = await res

  // Pass data to the page  via props
  return { props: { SelectedJob } }
}

export default requestForm