import React, {ReactNode, useState} from 'react';
import CustomFormSection from "../CustomFormSection/CustomFormSection";
import CustomLabel from "../CustomLabel/CustomLabel";
import CustomRadioSelect from "../CustomSelect/CustomRadioSelect";
import SelectItem from "../CustomSelect/SelectItem";
import CustomSelect from "../CustomSelect/CustomSelect";
import CustomTextField from "../CustomTextField/CustomTextField";

type FormProps = {
    children?: ReactNode
}

const Form = ({children}: FormProps) => {


    const [select, setSelect] = useState('')
    const [text, setText] = useState('')

    return (
        <div style={{}}>
            <CustomFormSection>
                <div className={'row gx-5 gy-5'}>

                    <div className="col-6">
                        <CustomLabel>
                            Label 2
                        </CustomLabel>
                        <CustomSelect
                            value={select}
                            theme={"user-form-select"}
                            handleChange={(n) => {
                                setSelect(n)
                            }}
                        >
                            <SelectItem value={1}>Option <b> 1</b></SelectItem>
                            <SelectItem value={2}>Option <b> 2</b></SelectItem>
                            <SelectItem value={3}>Option <b> 3</b></SelectItem>
                        </CustomSelect>
                    </div>

                    <div className="col-6">
                        <CustomLabel>
                            Label 2
                        </CustomLabel>
                        <CustomTextField
                            value={text}
                            theme={'user-form-field'}
                            onChange={(n: any) => {
                                setText(n)
                            }}
                        />
                    </div>

                    <div className="col-4">
                        <CustomLabel>
                            Label 2
                        </CustomLabel>
                        <CustomTextField
                            value={text}
                            theme={'user-form-field'}
                            onChange={(n: any) => {
                                setText(n)
                            }}
                        />
                    </div>

                    <div className="col-4">
                        <CustomLabel>
                            Label 2
                        </CustomLabel>
                        <CustomTextField
                            value={text}
                            theme={'user-form-field'}
                            onChange={(n: any) => {
                                setText(n)
                            }}

                        />
                    </div>

                    <div className="col-4">
                        <CustomLabel></CustomLabel>
                        <CustomTextField
                            value={text}
                            theme={'user-form-field'}
                            onChange={(n: any) => {
                                setText(n)
                            }}
                        />
                    </div>
                </div>
            </CustomFormSection>

            <CustomFormSection>
                <div className={'row gx-5 gy-5'}>


                    <div className="col-5">
                        <CustomLabel>
                            Label 2
                        </CustomLabel>
                        <CustomSelect
                            value={select}
                            theme={"user-form-select"}
                            handleChange={(n) => {
                                setSelect(n)
                            }}
                        >
                            <SelectItem value={1}>Option <b> 1</b></SelectItem>
                            <SelectItem value={2}>Option <b> 2</b></SelectItem>
                            <SelectItem value={3}>Option <b> 3</b></SelectItem>
                        </CustomSelect>
                    </div>

                    <div className="col-5 offset-1">
                        <CustomLabel></CustomLabel>
                        <CustomTextField
                            value={text}
                            theme={'user-form-field'}
                            onChange={(n: any) => {
                                setText(n)
                            }}
                        />
                    </div>

                </div>
            </CustomFormSection>


        </div>
    );
}

export default Form;