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 { MDBRadio } from 'mdb-react-ui-kit';
import Employer from '../../../../public/resource/icons/portfolio-outline.png'
import axios from "axios";
import {FORM_CAST} from "../../../../src/redux/actions";
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";



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('https://mehriranianco.ir/api/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(`https://mehriranianco.ir/api/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;