import {useEffect, useRef, useState} from 'react';
import {Dayjs} from 'dayjs';
import {toast} from '@befe/brick-comp-toast';
import {RangePicker} from '../src';

export const RangePickerDemo = () => {
    const [startValue, setStartValue] = useState<Dayjs | null>(null);
    const [endValue, setEndValue] = useState<Dayjs | null>(null);
    const [visible, setVisible] = useState(false);
    const refPicker = useRef<RangePicker>(null);

    const togglePicker = (visible: boolean) => {
        setVisible(visible);
    };

    useEffect(() => {
        if (visible) {
            refPicker.current?.focus();
        }
    }, [visible])

    const noticeText = '点击本文本修改';

    if (!visible) {
        let startText = '未设置开始时间';
        if (startValue) {
            startText = startValue.format('YYYY-MM-DD')
        }

        let endText = '未设置结束时间';
        if (endValue) {
            endText = endValue.format('YYYY-MM-DD')
        }

        return (
            <span onClick={() => togglePicker(true)}>
                {startText} ~ {endText} {noticeText}
            </span>
        )
    }

    return (
        <RangePicker
            startValue={startValue}
            ref={refPicker}
            endValue={endValue}
            onChange={(start, end) => {
                setStartValue(start);
                setEndValue(end)
            }}
            onBlur={() => {
                toast.info('onBlur : RangePicker')
                togglePicker(false);
            }}
        />
    );
};