import React, {useState} from 'react';
import { useForm } from "react-hook-form";
import {useDispatch, useSelector} from "react-redux";
import {ADDFRAMEWORK, FORM_CAST} from "../src/redux/actions";
import AppContainer from "./appContainer";
import Image from "next/image";
import { Step, Steps, useSteps } from 'chakra-ui-steps';
import {MDBContainer, MDBInput, MDBTypography} from "mdb-react-ui-kit";
import {Box, Button, Center, Flex, Heading, Input, Select, SimpleGrid, Stack} from "@chakra-ui/react";
import { withKeepAlive } from 'react-next-keep-alive';


const CooperationRequest = () => {
    const Parallax = ({  quality }) => {
        return `../resource/parallax/about.jpg`;
    }
    const userData = useSelector((state => state.Global))
    const formReq = useSelector((state => state.FormRequest))
    const dispatch = useDispatch()
    console.log('formReq',formReq)
    const [Access, SetAccess] =useState(true)

    const PersonalForm= () => {
        const [Sex, SetSex] = useState(0)
        const {register, handleSubmit, watch, formState: { errors }} = useForm()
        let hasErr = Object.keys(errors).length
        const onSubmit = async (data) => {
            console.log('dadadada', data)
            if (hasErr === 0) {
                dispatch(FORM_CAST(data))
                nextStep()
            }
            else {
                alert('مقادیر وارد شده معبتر نمی باشد')
            }
        };
        return (
            <Flex className={'flex lg:p-2 sm:p-1 m-2'}>
                <form onSubmit={handleSubmit(onSubmit)}>
                    <SimpleGrid dir={'rtl'} columns={[1, 2, 5]} spacing={5}>
                        <Box>
                            <Input dir={'rtl'} {...register('name', {required: true, maxLength: 100})} borderColor={'teal'} variant='outline'  placeholder='نام و نام خانوادگی ' />
                            <p className={'position-absolute text-sm text-danger'}>
                                {errors?.name?.type === "required" && <p> وارد کردن نام اجباری است</p>}
                                {errors?.name?.type === "maxLength" && <p>نام وارد شده معبتر نمی باشد</p>}
                            </p>
                        </Box>
                        <Box>
                            <Input value={12345678912} dir={'rtl'} {...register('national_code', {required: true, maxLength: 11})} borderColor={'teal'} variant='outline' type={'number'}  placeholder='کد ملی' />
                            <p className={'position-absolute text-sm text-danger'}>
                                {errors?.national_code?.type === "required" && <p> وارد کردن کد ملی اجباری است</p>}
                                {errors?.national_code?.type === "maxLength" && <p>کد ملی وارد شده معبتر نمی باشد</p>}
                            </p>
                        </Box>
                        <Box>
                            <Input dir={'rtl'} {...register('birth_location', {required: true})} borderColor={'teal'} variant='outline' placeholder='محل تولد ' />
                            <p className={'position-absolute text-sm text-danger'}>
                                {errors?.birth_location?.type === "required" && <p> وارد کردن محل تولد  اجباری است</p>}
                            </p>
                        </Box>
                        <Box>
                            <Input dir={'rtl'} {...register('birthdate', {required: true})} borderColor={'teal'} variant='outline'   placeholder='تاریخ تولد  ' />
                            <p className={'position-absolute text-sm text-danger'}>
                                {errors?.birthdate?.type === "required" && <p> وارد کردن تاریخ تولد  اجباری است</p>}
                            </p>
                        </Box>
                        <Box>
                            <Select {...register('gender', {required: true})} onChange={(e) => SetSex(e.target.value)} borderColor={'teal'} dir={'ltr'} placeholder='جنسیت '>
                                <option dir={'rtl'} value='1'> مرد</option>
                                <option dir={'rtl'} value='0'> رن</option>
                            </Select>
                            <p className={'position-absolute text-sm text-danger'}>
                                {errors?.gender?.type === "required" && <p>مشخص کردن جنسیت  اجباری است</p>}
                            </p>
                        </Box>
                         <Box>
                             <Select {...register('marital', {required: true})} borderColor={'teal'} dir={'ltr'} placeholder='وضعیت تاهل '>
                                 <option dir={'rtl'} value='married'> متاهل</option>
                                 <option dir={'rtl'} value='single'> مجرد</option>
                             </Select>
                             <p className={'position-absolute text-sm text-danger'}>
                                 {errors?.marital?.type === "required" && <p>مشخص کردن جنسیت  اجباری است</p>}
                             </p>
                         </Box>
                        <Box>
                            {Sex === '1' ? (
                                <Select {...register('military')} borderColor={'teal'} dir={'ltr'} placeholder='وضعیت مظام وظیفه '>
                                    <option dir={'rtl'} value='Done'> انجام شده </option>
                                    <option dir={'rtl'} value='not'> انجام نشده</option>
                                    <option dir={'rtl'} value='bug'> خرید خدمت </option>
                                    <option dir={'rtl'} value='specific'>  معافیت خاص </option>
                                </Select>
                            ): ''}
                        </Box>
                    </SimpleGrid>
                    <Flex width="100%" flexDir={'row'} mt={150} justify="space-between">
                        <Button
                            mr={4}
                            size="sm"
                            colorScheme='teal'
                            variant="ghost"
                            onClick={prevStep}
                            isDisabled={activeStep === 0}
                        >
                            مرحله قبل
                        </Button>
                        <Button type={'submit'} colorScheme={'teal'} size="sm" >
                            {activeStep === steps.length - 1 ? "ثبت اطلاعات" : "مرحله بعد"}
                        </Button>
                    </Flex>
                </form>
            </Flex>
        )
    };
    const WorkHistoryForm= () => (
        <Flex className={'flex p-2 m-2 justify-content-center'}>
            <form>
                <SimpleGrid dir={'rtl'} columns={[1, 2, 4]} spacing={5}>
                <Input dir={'rtl'} borderColor={'teal'} variant='outline'  placeholder='نام و نام خانوادگی ' />
                <Input dir={'rtl'} borderColor={'teal'} variant='outline'  placeholder='Basic usage' />
                <Input dir={'rtl'} borderColor={'teal'} variant='outline'  placeholder='Basic usage' />
                <Input dir={'rtl'} borderColor={'teal'} variant='outline'  placeholder='Basic usage' />
            </SimpleGrid>
                <Flex width="100%" flexDir={'row'} mt={150} justify="space-between">
                    <Button
                        mr={4}
                        size="sm"
                        colorScheme='teal'
                        variant="ghost"
                        onClick={prevStep}
                        isDisabled={activeStep === 0}
                    >
                        مرحله قبل
                    </Button>
                    <Button colorScheme={'teal'} size="sm" onClick={CanAccess}>
                        {activeStep === steps.length - 1 ? "ثبت اطلاعات" : "مرحله بعد"}
                    </Button>
                </Flex>
            </form>
        </Flex>
    );
    function HandleShowForm (index) {
        switch (index) {
            case 0:
                return <PersonalForm />
            case 1:
                return <WorkHistoryForm />
            default:
                return index
        }
    }
    const Content = ({index}) => {return (<div>{HandleShowForm(index)}</div>)}

    const steps = [
        { label: 'اطلاعات شخص', Content },
        { label: ' مشخصات تماس', Content },
        { label: '  اطلاعات تحصیلی', Content },
        { label: 'سوابق کاری  ', Content },
        { label: ' مدارک و مستندات  ', Content },
    ];
    const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({
        initialStep: 0,
    });
    const CanAccess = () => {
        if (Access) {
            nextStep()
        }else {
            alert('اطلاعات را بررسی کنید')
        }
    }
    return (
        <div>

            <AppContainer title={'درخواست همکاری'}>
                <div className="parallax-container">
                    <h1 className={'center-align text-white service-text dana font-weight-bold'}> درخواست همکاری   </h1>
                    <Image
                        loader={Parallax}
                        src="Parallax.png"
                        className={'responsive-img shadow-5'}
                        alt="درباره بیارستان مهر ایرانیان پرند "
                        width={3000}
                        height={1300}
                    />
                </div>
                <MDBContainer className={'mt-5 mb-5'}>
                    <Steps className={'fix-res-steps'}  dir={'rtl'} activeStep={activeStep}>
                        {steps.map(({ label, content }, index) => (
                            <Step className={'dana fix-res-step'} label={label} key={label}>
                                <div dir={'rtl'} className={'bg-gray-100 m-4 p-2 rounded-md'}>
                                    <Content index={index} />
                                </div>
                            </Step>
                        ))}
                    </Steps>
                    {activeStep === 5 ? (
                        <Center p={4} flexDir="column">
                            <Heading fontSize="xl"> درخواست شما با موفقیت ثبت شد پس از بررسی کارشناسان ما با شما تماس خواهند گرفت</Heading>
                            <Button color={'green'} mt={6} size="sm" onClick={reset}>
                                Reset
                            </Button>
                        </Center>
                    ) : (
                        <Flex width="100%" flexDir={'row-reverse'} justify="space-between">
                            <Button
                                mr={4}
                                size="sm"
                                colorScheme='teal'
                                variant="ghost"
                                onClick={prevStep}
                                isDisabled={activeStep === 0}
                            >
                                مرحله قبل
                            </Button>
                            <Button colorScheme={'teal'} size="sm" onClick={CanAccess}>
                                {activeStep === steps.length - 1 ? "ثبت اطلاعات" : "مرحله بعد"}
                            </Button>
                        </Flex>
                    )}
                </MDBContainer>
            </AppContainer>
        </div>
    );
};

export default CooperationRequest;