import SliderSingle from '@/Components/Inputs/SliderSingle'
import SliderRange from '@/Components/Inputs/SliderRange'
import { ReactElement } from 'react'
import Checkbox from '@/Components/Inputs/Checkbox'
import React from 'react'

const SliderTest = (): ReactElement => {
    const [value1, setValue1] = React.useState<number | undefined>(undefined)
    const [value2, setValue2] = React.useState<number | undefined>(undefined)
    const [rangeValue, setRangeValue] = React.useState<[number, number] | undefined>(undefined)
    const [disabled, setDisabled] = React.useState<boolean>(false)
    return (
        <div className='p-20 flex flex-col gap-10'>
            <Checkbox
                id='disabler'
                testId='disabler'
                label='Disable all sliders'
                value={disabled}
                onChange={(v) => {
                    setDisabled(v)
                }}
            />
            <div>
                <SliderSingle
                    id='slider-test'
                    testId='slider-test'
                    disabled={disabled}
                    retainUndefinedOnLoad={true}
                    label={<>Slider test: retain undefined on load <strong className='p-2 bg-slate-600 text-white'>{value1 === undefined ? 'undefined' : value1}</strong></>}
                    min={0}
                    max={100}
                    step={1}
                    value={value1}
                    onChangeComplete={(v) => {
                        setValue1(v)
                    }}
                />
            </div>
            <div>
                <SliderSingle
                    id='slider-test2'
                    testId='slider-test2'
                    disabled={disabled}
                    label={<>Slider test: not retain undefined on load (default behavior) <strong className='p-2 bg-slate-600 text-white'>{value2 === undefined ? 'undefined' : value2}</strong></>}
                    description='This is a slider test component'
                    min={0}
                    max={100}
                    step={1}
                    value={value2}
                    onChangeComplete={(v) => {
                        setValue2(v)
                    }}
                />
            </div>
            <div>

                <SliderRange
                    id='slider-range-test'
                    testId='slider-range-test'
                    disabled={disabled}
                    label={<>Slider range test: retain undefined on load <strong className='p-2 bg-slate-600 text-white'>{rangeValue === undefined ? 'undefined' : rangeValue.join(',')}</strong></>}
                    description='This is a slider range test component'
                    min={0}
                    max={100}
                    step={1}
                    range={rangeValue}
                    retainUndefinedOnLoad={true}
                    onChangeComplete={(v => {
                        setRangeValue(v as [number, number])
                    })}
                />
            </div>
        </div>
    )
}

export default SliderTest