import { Checkbox, Input, RadioGroup, SelectInput, TextArea } from "@/Components"
import SliderRange from "@/Components/Inputs/SliderRange"
import SliderSingle from "@/Components/Inputs/SliderSingle"
import React, { ReactElement } from "react"

const DisabledTest = (): ReactElement => {
    const [disabled, setDisabled] = React.useState<boolean>(false)
    return (
        <div className='p-20 flex flex-col gap-8'>
            <Checkbox
                id='disabler'
                testId='disabler'
                label='Disable all inputs'
                value={disabled}
                onChange={(v) => {
                    setDisabled(v)
                }}
            />
            <Input
                id='input-test'
                testId='input-test'
                label='Input test'
                description='This is an input test component'
                disabled={disabled}
            />
            <TextArea
                id='textarea-test'
                testId='textarea-test'
                label='Text area test'
                description='This is an textarea test component'
                disabled={disabled}
            />
            <Checkbox
                id='checkbox-test'
                testId='checkbox-test'
                label='Checkbox test'
                description='This is a checkbox test component'
                disabled={disabled}
                value={true}
            />
            <RadioGroup
                id='radio-group-test'
                testId='radio-group-test'
                label='Radio group test'
                description='This is a radio group test component'
                disabled={disabled}
                options={[
                    { label: 'Option 1', value: '1' },
                    { label: 'Option 2', value: '2' },
                    { label: 'Option 3', value: '3' }
                ]}
            />
            <SelectInput
                id='select-test'
                testId='select-test'
                label='Select test'
                description='This is a select test component'
                disabled={disabled}
                options={[
                    { label: 'Option 1', value: '1' },
                    { label: 'Option 2', value: '2' },
                    { label: 'Option 3', value: '3' }
                ]}
            />
            <SliderSingle
                id='slider-test'
                testId='slider-test'
                disabled={disabled}
                label='Slider test'
                description='This is a slider test component'
                min={0}
                max={100}
                step={1}
            />
            <SliderRange
                id='slider-range-test'
                testId='slider-range-test'
                disabled={disabled}
                label='Slider range test'
                description='This is a slider range test component'
                min={0}
                max={100}
                step={1}
            />
        </div>
    )
}

export default DisabledTest
