import React, {useContext, useState} from 'react';
import {Box, Checkbox, Input, Radio, RadioGroup, Select, SimpleGrid, Stack, Text, Textarea} from "@chakra-ui/react";
import {MDBBtn, MDBInputGroup, MDBInputGroupText} from "mdb-react-ui-kit";
import {FiUser} from "react-icons/fi";
import {useForm} from "react-hook-form";
import {HandleFormReq} from "../../../../lib/HandleFormReq";
import NumberFormat from "react-number-format";
import log from "tailwindcss/lib/util/log";

const Furtherinformation = () => {
    const {setPage, furtherinformation, setFurtherinformation} = useContext(HandleFormReq)
    const [criminal,setCriminal] = useState(process.browser && furtherinformation.criminal.toString())
    const [salary, setSalary] = useState(process.browser && furtherinformation.salary)
    const [Introduced, setIntroduced] = useState(process.browser && furtherinformation.Introduced)

    // let handleSubmit = () => {
    //     setPage(7)
    // }
    let handleChange = (e) => {
        setFurtherinformation({criminal: criminal,salary: salary, Introduced: Introduced})
    }
    return (
        <div>
            {process.browser && (
                <div>
                    <SimpleGrid className={'mt-2 flex  mt-5'} dir={'rtl'} columns={[1,1,2]} spacingX='390px' spacingY='20px'>
                        <Box>
                            <MDBInputGroup className='flex  flex-md-row flex-lg-row flex-sm-column '>
                                <div style={{ flexDirection: 'column' }} className={'flex align-items-center flex-md-row flex-lg-row flex-sm-column '}>
                                    <MDBInputGroupText className={'rounded-0 border-0'}>
                                        آیا سابقه  کیفری دارید :
                                    </MDBInputGroupText>
                                    <RadioGroup className={'flex align-items-center'} onChange={setCriminal} value={criminal}>
                                        <Stack spacing={4} direction='row'>
                                            <Radio value='1'> ندارم </Radio>
                                            <Radio value='2'> دارم </Radio>
                                        </Stack>
                                    </RadioGroup>
                                </div>
                            </MDBInputGroup>
                        </Box>
                        <Box>
                            <MDBInputGroup className='mb-3 flex'>
                                <div className={'flex align-items-center'}>
                                    <MDBInputGroupText className={'rounded-0'}>
                                        <FiUser />
                                    </MDBInputGroupText>
                                    <NumberFormat
                                        style={{ height: 40 }}
                                        dir={'rtl'}
                                        onValueChange={(values) => {
                                            const { formattedValue, value } = values;
                                            handleChange()
                                            setSalary(formattedValue)
                                            console.log('salery', salary)
                                        }}
                                        className={'form-control'}
                                        type={'text'}
                                        thousandSeparator={true}
                                        defaultValue={furtherinformation.salary}
                                        placeholder="   حقوق پیشنهادی(تومان)  "
                                    />
                                </div>
                            </MDBInputGroup>
                        </Box>
                    </SimpleGrid>
                    <Box dir={'rtl'} className={''}>
                        <br /><br />
                        <Textarea
                            dir={'rtl'}
                            defaultValue={furtherinformation.Introduced}
                            onChange={(e) => {
                                handleChange()
                                setIntroduced(e.target.value)}
                            }
                            placeholder='در صورتی که معرفی دارید نام و شماره تماس آن را وارد کنید  '
                        />
                    </Box>
                    <br />
                    <br />
                    <br />
                </div>
            )}

            {/*<MDBBtn onClick={handleSubmit} size={'sm'} className={'mt-2 bg-primary-teal'}  >ثبت درخواست </MDBBtn>*/}
        </div>
    );
};

export default Furtherinformation;