import React, {useContext, useState} from 'react';
import {Box, Input, 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 EducationalData = () => {
    const {setPage, educationalData, setEducationalData} = useContext(HandleFormReq)
    const [formValues, setFormValues] = useState(educationalData)
    console.log('edd', educationalData)
    let handleChange = (i, e) => {
        let newFormValues = [...formValues];
        newFormValues[i][e.target.name] = e.target.value;
        setFormValues(newFormValues);
    }

    let addFormFields = () => {
        setFormValues([...formValues, {
            university: '',
            field : '',
            trend: '',
            score: '',
            dateField: '',
        }])
    }

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

    let handleSubmit = (event) => {
        event.preventDefault();
        console.log(formValues);
        setEducationalData(formValues)
        setPage(3)
    }
    return (
        <div>
            <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
                                                      required
                                                      id='university'
                                                      name="university"
                                                      onChange={e => handleChange(index, e)}
                                                      defaultValue={element.university || ""}                                                    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='field'
                                                 name="field"
                                                 required
                                                 onChange={e => handleChange(index, e)}
                                                 defaultValue={element.field || ""}                                                    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='trend'
                                                name="trend"
                                                required
                                                onChange={e => handleChange(index, e)}
                                                defaultValue={element.trend || ""}                                                    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='dateField'
                                                name="dateField"
                                                required
                                                onChange={e => handleChange(index, e)}
                                                defaultValue={element.dateField || ""}                                                    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='score'
                                                name="score"
                                                required
                                                onChange={e => handleChange(index, e)}
                                                defaultValue={element.score || ""}                                                    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 EducationalData;