import {useState} from 'react';
import {Select} from '@befe/brick-comp-select';
import {DatePickerProps} from '../src';

const SIZE_OPTIONS = [
    {value: 'md', label: 'md'},
    {value: 'sm', label: 'sm'},
]
// const DEFAULT_SIZE = 'md';
// @dev, 可改为默认 'sm'
const DEFAULT_SIZE = 'sm';

export function usePanelSize() {
    const [panelSize, setPanelSize] = useState<DatePickerProps['size']>(DEFAULT_SIZE);

    function render() {
        return (
            <div className={'control-wrap demo-related-control'}>
                <label>切换为 :</label>
                <Select
                    options={SIZE_OPTIONS}
                    value={panelSize}
                    onChange={(value) => setPanelSize(value as DatePickerProps['size'])}
                />
            </div>
        )
    }

    return {
        render,
        datePickerClass: () => `brick-date-picker-popper-size-${panelSize || 'md'}`,
        rangePickerClass: () => `brick-range-picker-popper-size-${panelSize || 'md'}`,
    }
}