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

const PcSkill = () => {
    const {setPage, pcSkillData, setPcSkillData} = useContext(HandleFormReq)
    let icdlStr = process.browser && pcSkillData.icdlLevel.toString()
    const [icdl, seticdl] = useState(icdlStr)
    const [text, settext] = useState('')
    let handleSubmit = () => {
        setPcSkillData({text:text,icdlLevel: icdl})
        setPage(7)
    }

    return (
        <div>
                <Box dir={'rtl'} >
                    {process.browser && (
                    <div>
                        <MDBInputGroup className='flex flex-md-row flex-lg-row flex-sm-column mt-5'>
                            <div style={{ flexDirection: 'column' }} className={'flex align-items-center flex-md-row flex-lg-row flex-sm-column mt-5 justify-content-start'}>
                                <MDBInputGroupText className={'rounded-0 border-0'}>
                                    آیا به ICDL (مهارت های هفتگانه آشنا هستید) :
                                </MDBInputGroupText>
                                <RadioGroup  onChange={seticdl} value={icdl} >
                                    <Stack direction='row'>
                                        <Radio value='1'>بله </Radio>
                                        <Radio value='2'>خیر</Radio>
                                    </Stack>
                                </RadioGroup>
                            </div>
                        </MDBInputGroup>
                        <br /><br />
                        <Textarea
                            dir={'rtl'}
                            defaultValue={pcSkillData.text}
                            onChange={(e) => settext(e.target.value)}
                            placeholder='در صورتی که به نرم افزار خاصی مسلط هستید نام آن را وارد کنید  '
                        />
                    </div>
                    )}
                </Box>

            <br />
            <br />
            <br />
            <MDBBtn onClick={handleSubmit} size={'sm'} className={'mt-2 bg-primary-teal'}  >مرحله بعد</MDBBtn>
        </div>
    );
};

export default PcSkill;