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 CoursesData = () => {
    const {setPage, coursesData, setCoursesData, langStatus, setLangStatus} = useContext(HandleFormReq)
    const [formValues, setFormValues] = useState(coursesData)

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

    }

    let addFormFields = () => {
        setFormValues([...formValues, {
            courseName: '',
            courseEdu: '',
            courseLocal: '',
            courseTime: '',
        }])
    }

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

    let handleSubmit = (event) => {
        event.preventDefault();
        setCoursesData(formValues)
        console.log(formValues);
        console.log('coursesData', coursesData);
        console.log('langStatus', langStatus.status);
        setPage(4)
    }
    return (
        <div>
            <SimpleGrid className={'mt-2 flex justify-content-between 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'}>
                              <div>
                                  <MDBInputGroupText className={'rounded-0 border-0'}>
                                      میزان آشنایی با زبان انگلیسی :
                                  </MDBInputGroupText>
                              </div>
                            {process.browser && (
                                <div>
                                    <select
                                        required
                                        onChange={(e) => setLangStatus({status: e.target.value})}
                                        dir={'ltr'}
                                        defaultValue={langStatus.status}
                                        style={{ width: 200 }}
                                        placeholder={'سطح زبان خود را مشخص کنید '}
                                    >
                                        <option value='3'> ضعیف </option>
                                        <option value='2'> خوب </option>
                                        <option value='1'> عالی  </option>
                                    </select>
                                </div>
                            )}
                        </div>
                    </MDBInputGroup>
                </Box>
            </SimpleGrid>
            <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='courseName'
                                                    name="courseName"
                                                    onChange={e => handleChange(index, e)}
                                                    defaultValue={element.courseName || ""}                                                    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='courseEdu'
                                                    name="courseEdu"
                                                    onChange={e => handleChange(index, e)}
                                                    defaultValue={element.courseEdu || ""}                                                    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='courseLocal'
                                                name="courseLocal"
                                                onChange={e => handleChange(index, e)}
                                                defaultValue={element.courseLocal || ""}                                                    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='courseTime'
                                                name="courseTime"
                                                onChange={e => handleChange(index, e)}
                                                defaultValue={element.courseTime || ""}                                                    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 CoursesData;