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

export const DatePickerDemo = () => {
    const [dateValue, setDateValue] = useState<Dayjs | null>(null);
    const [visible, setVisible] = useState(false);
    const refPicker = useRef<DatePicker>(null);

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

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

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

    if (!visible) {
        let dateText = '未设置时间';
        if (dateValue) {
            dateText = dateValue.format('YYYY-MM-DD')
        }

        return (
            <span onClick={() => togglePicker(true)}>
                {dateText} {noticeText}
            </span>
        )
    }

    return (
        <DatePicker
            value={dateValue}
            ref={refPicker}
            onChange={(value) => {
                setDateValue(value)
            }}
            onBlur={() => {
                toast.info('onBlur : DatePicker')
                togglePicker(false)
            }}
        />
    );
};