import { useCallback, useState } from 'react';
import { Button, DatePicker, DatePickerProps } from 'antd';
import React from 'react';

type DatePickerLongProps = {
    longValue?: any,
    longText?: any,
}
type Props = DatePickerLongProps & DatePickerProps;

export default function DatePickerLong(props: Props) {
    const {
        value,
        onChange,
        longText = '长期',
        longValue = 'long', // 长期值，
        ...others
    } = props;
    const [ open, setOpen ] = useState(false);

    // 用户点击长期
    const handleLongClick = useCallback(() => {
        if (onChange) {
            onChange(longValue, longValue);
        }
        setOpen(false);
    }, [ longValue, onChange ]);

    // 是否是长期
    const isLong = value === longValue;

    // 长期，面板上不选中日期
    const _value = isLong ? null : value;

    return (
        <div style={{ position: 'relative', display: 'inline-block' }}>
            {isLong ? (
                <div
                    style={{
                        top: 1,
                        bottom: 1,
                        left: 8,
                        right: 40,
                        position: 'absolute',
                        zIndex: 9,
                        background: '#fff',
                        display: 'flex',
                        alignItems: 'center',
                        pointerEvents: 'none',
                    }}
                >{longText}</div>
            ) : null}
            <DatePicker
                open={open}
                onOpenChange={setOpen}
                onChange={onChange}
                value={_value}
                renderExtraFooter={() => (
                    <Button
                        block
                        type="link"
                        onClick={() => handleLongClick()}
                    >
                        {longText}
                    </Button>
                )}
                {...others}
            />
        </div>
    );
}