import React, { useEffect, 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'
import { useRouter } from 'next/router'

const CooperationRequest = () => {
  const Parallax = ({ quality }) => {
    return `../resource/parallax/about.jpg`
  }
  const { replace } = useRouter()
  useEffect(() => {
    replace('/recruitment')
  }, [])
  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