import React, {useContext, useState} from 'react';
import {Box, Input, Select, SimpleGrid} 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";

const JobData = () => {
    const {setPage, jobData, setJob} = useContext(HandleFormReq)
    const [formValues, setFormValues] = useState(jobData)

    let handleChange = (i, e) => {
        let newFormValues = [...formValues];
        newFormValues[i][e.target.name] = e.target.value;
        setFormValues(newFormValues);
    }

    let addFormFields = () => {
        setFormValues([...formValues, {
        companyName: '',
        position: '',
        workTime: '',
        exitReason: '',
        lastIncome: ''
    }])
        console.log('add nf', formValues);
    }

    let removeFormFields = (i) => {
        let newFormValues = [...formValues];
        newFormValues.splice(i, 1);
        setFormValues(newFormValues)
    }

    let handleSubmit = (event) => {
        event.preventDefault();
        setJob(formValues)
        setPage(5)
    }
    return (
        <div>
            <br />
            <br />
            <p className={'right'}>در صورتی که    سابقه کاری دارید  اطلاعات آن را وارد کنید </p>
            <br />
            <br />
            <form onSubmit={handleSubmit} id={'persondataform'}>
                <SimpleGrid className={'mt-4'} dir={'rtl'} columns={[1, 1, 1]} spacing={3}>
                    {process.browser && formValues.map((element, index) => (
                        <>
                            <Box className={'d-lg-flex d-md-block justify-content-between'} key={index}>
                                <Box>
                                    <div>
                                        <MDBInputGroup className='mb-3'>
                                            <div className={'flex align-items-center'}>
                                                <MDBInputGroupText className={'rounded-0'}>
                                                    <FiUser />
                                                </MDBInputGroupText>
                                                <Input
                                                    id='companyName'
                                                    name="companyName"
                                                    onChange={e => handleChange(index, e)}
                                                    defaultValue={element.companyName || ""}                                                    className={'bk-med rounded-0'}
                                                    style={{ height: 40 }}
                                                    dir={'rtl'}
                                                    type='text'
                                                    placeholder="نام  شرکت / موسسه"
                                                />
                                            </div>
                                        </MDBInputGroup>
                                    </div>
                                </Box>
                                <Box>
                                    <div>
                                        <MDBInputGroup className='mb-3 flex'>
                                            <div className={'flex align-items-center'}>
                                                <MDBInputGroupText className={'rounded-0'}>
                                                    <FiUser />
                                                </MDBInputGroupText>
                                                <Input
                                                    id='position'
                                                    name="position"
                                                    onChange={e => handleChange(index, e)}
                                                    defaultValue={element.position || ""}                                                    className={'bk-med rounded-0'}
                                                    style={{ height: 40 }}
                                                    dir={'rtl'}
                                                    type='text'
                                                    placeholder="موضعیت شغلی         "
                                                />
                                            </div>
                                        </MDBInputGroup>
                                    </div>
                                </Box>
                                <Box>
                                    <MDBInputGroup className='mb-3 flex'>
                                        <div className={'flex align-items-center'}>
                                            <MDBInputGroupText className={'rounded-0'}>
                                                <FiUser />
                                            </MDBInputGroupText>
                                            <Input
                                                id='workTime'
                                                name="workTime"
                                                onChange={e => handleChange(index, e)}
                                                defaultValue={element.workTime || ""}                                                    className={'bk-med rounded-0'}
                                                style={{ height: 40 }}
                                                dir={'rtl'}
                                                type='text'
                                                placeholder="مدت  همکاری  "
                                            />
                                        </div>
                                    </MDBInputGroup>
                                </Box>
                                <Box>
                                    <MDBInputGroup className='mb-3 flex'>
                                        <div className={'flex align-items-center'}>
                                            <MDBInputGroupText className={'rounded-0'}>
                                                <FiUser />
                                            </MDBInputGroupText>
                                            <Input
                                                id='exitReason'
                                                name="exitReason"
                                                onChange={e => handleChange(index, e)}
                                                defaultValue={element.exitReason || ""}                                                    className={'bk-med rounded-0'}
                                                style={{ height: 40 }}
                                                dir={'rtl'}
                                                type='text'
                                                placeholder="دلیل خروج    "
                                            />
                                        </div>
                                    </MDBInputGroup>
                                </Box>
                                <Box>
                                    <MDBInputGroup className='mb-3 flex'>
                                        <div className={'flex align-items-center'}>
                                            <MDBInputGroupText className={'rounded-0'}>
                                                <FiUser />
                                            </MDBInputGroupText>
                                            <Input
                                                id='lastIncome'
                                                name="lastIncome"
                                                onChange={e => handleChange(index, e)}
                                                defaultValue={element.lastIncome || ""}                                                    className={'bk-med rounded-0'}
                                                style={{ height: 40 }}
                                                dir={'rtl'}
                                                type='text'
                                                placeholder="حقوقی دریافتی  (تومان)  "
                                            />
                                        </div>
                                    </MDBInputGroup>
                                </Box>
                            </Box>

                            {
                                index ?
                                    <MDBBtn color={'danger'} outline type="button"  className="button remove" onClick={() => removeFormFields(index)}>پاک کردن</MDBBtn>
                                    : null
                            }
                        </>
                    ))}
                </SimpleGrid>
                <div className="flex justify-content-end mt-5">
                    <MDBBtn color={'warning'} className="button add" type="button" onClick={() => addFormFields()}>اضافه کردن </MDBBtn>
                </div>
                <MDBBtn type={'submit'} size={'sm'} className={'mt-2 bg-primary-teal'}  >مرحله بعد</MDBBtn>
            </form>
        </div>
    );
};

export default JobData;