import { Button, CalendarPickerViewRef, DatePicker, Popup } from "antd-mobile";
import dayjs from "dayjs";
import { FC, useRef } from "react";

interface Props {
    visible: boolean;
    onConfirm: () => void;
    onClose: () => void;
    onMaskClick: () => void;
    onChange: () => void;
    defaultValue?: Date | null;
    min: Date | undefined;
    max: Date | undefined;
}
const DateSelect: FC<Props> = (props) => {
    const {
        visible,
        onConfirm,
        onClose,
        onMaskClick,
        onChange,
        min = dayjs().subtract(30, "year").toDate(),
        max = dayjs().subtract(18, "year").toDate(),
        defaultValue = max,
    } = props;
    const calendarRef = useRef<CalendarPickerViewRef>(null);
    return (
        <Popup
            visible={visible}
            bodyStyle={{
                background: "#fff",
                color: "#666",
                borderTopLeftRadius: "0.1389rem",
                borderTopRightRadius: "0.1389rem",
                paddingBottom: "20px",
            }}
            className={"h-[200px]"}
            showCloseButton
            getContainer={null}
            onClose={onClose}
            onMaskClick={onMaskClick}
        >
            <DatePicker>
                {(value) => (value ? dayjs(value).format("YYYY-MM-DD") : "请选择日期")}
            </DatePicker>
            <div className={"flex justify-center"}>
                <Button color={"primary"} onClick={onConfirm}>
                    Confirm
                </Button>
            </div>
        </Popup>
    );
};

export default DateSelect;
