import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Popover, PopoverContent, PopoverTrigger } from "../popover";
import { cn } from "../utils";
import { CalendarIcon } from "./sections/calendarIcon";
import { Calendar } from "./calendar";
import { format, subDays } from "date-fns";
import { ArrowDown } from "./sections/arrowIcon";
import { useTranslation } from "../i18n";
export const DatePicker = (props)=>{
    const { triggerClassName, className, initDate, trigger, onDateUpdate, numberOfMonths = 2, ...rest } = props;
    const [date, setDate] = React.useState(initDate || {
        from: subDays(new Date(), 30),
        to: new Date()
    });
    const t = useTranslation();
    const [open, setOpen] = React.useState(false);
    React.useEffect(()=>{
        if (initDate) {
            setDate(initDate);
        }
    }, [
        initDate
    ]);
    const dateText = React.useMemo(()=>{
        if (typeof date?.from !== 'undefined') {
            return `${format(date.from, "yyyy/MM/dd")}${` - ${format(date.to || date.from, "yyyy/MM/dd")}`}`;
        }
        return t("ui.calendar.selecet-date");
    }, [
        date,
        t
    ]);
    const triggerView = React.useMemo(()=>{
        return trigger || /*#__PURE__*/ _jsxs("div", {
            id: "orderly-data-picker-trigger",
            className: cn("orderly-cursor-pointer orderly-flex orderly-gap-2 orderly-items-center orderly-h-[24px] orderly-text-3xs orderly-text-base-contrast-54 orderly-justify-start orderly-text-left orderly-px-2 orderly-py-2 orderly-bg-base-600 orderly-fill-base-contrast-54 hover:orderly-text-base-contrast-80", triggerClassName),
            children: [
                /*#__PURE__*/ _jsx(CalendarIcon, {
                    fillOpacity: 1,
                    fill: "current",
                    className: "orderly-fill-base-contrast-54 hover:orderly-fill-white/80"
                }),
                dateText,
                /*#__PURE__*/ _jsx(ArrowDown, {
                    fillOpacity: 1,
                    className: "orderly-fill-base-contrast-54 hover:orderly-fill-white/80"
                })
            ]
        });
    }, [
        trigger,
        triggerClassName,
        date
    ]);
    return /*#__PURE__*/ _jsx("div", {
        className: cn("orderly-grid orderly-gap-2", className),
        children: /*#__PURE__*/ _jsxs(Popover, {
            open: open,
            onOpenChange: (open)=>{
                if (!open) {}
                setOpen(open);
            },
            children: [
                /*#__PURE__*/ _jsx(PopoverTrigger, {
                    asChild: true,
                    children: triggerView
                }),
                /*#__PURE__*/ _jsx(PopoverContent, {
                    className: "orderly-w-auto orderly-p-0",
                    align: "start",
                    children: /*#__PURE__*/ _jsx(Calendar, {
                        initialFocus: true,
                        mode: "range",
                        defaultMonth: date?.from,
                        // @ts-ignore
                        selected: date,
                        // @ts-ignore
                        onSelect: (date)=>{
                            onDateUpdate?.(date);
                            // @ts-ignore
                            setDate(date);
                        },
                        fromYear: 2024,
                        numberOfMonths: numberOfMonths,
                        ...rest
                    })
                })
            ]
        })
    });
};

//# sourceMappingURL=datePiker.js.map