"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { CalendarClock, Clock, RotateCcw } from "lucide-react";
import { useEditContext } from "../client/editContext";
import { cn } from "../../lib/utils";
import { Button } from "../../components/ui/button";
import { Calendar } from "../../components/ui/calendar";
import { Input } from "../../components/ui/input";
import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
function padDatePart(value) {
    return value.toString().padStart(2, "0");
}
function toTimeValue(date) {
    return [padDatePart(date.getHours()), ":", padDatePart(date.getMinutes())].join("");
}
function withDateParts(sourceDate, dateParts) {
    const nextDate = new Date(sourceDate);
    nextDate.setFullYear(dateParts.getFullYear(), dateParts.getMonth(), dateParts.getDate());
    nextDate.setSeconds(0, 0);
    return nextDate;
}
function withTimeValue(sourceDate, value) {
    const [hoursValue, minutesValue] = value.split(":");
    const hours = Number(hoursValue);
    const minutes = Number(minutesValue);
    if (!Number.isInteger(hours) ||
        !Number.isInteger(minutes) ||
        hours < 0 ||
        hours > 23 ||
        minutes < 0 ||
        minutes > 59) {
        return undefined;
    }
    const nextDate = new Date(sourceDate);
    nextDate.setHours(hours, minutes, 0, 0);
    return nextDate;
}
function getPreviewDateLabel(previewDate) {
    if (!previewDate)
        return "Now";
    return previewDate.toLocaleString(undefined, {
        dateStyle: "medium",
        timeStyle: "short",
    });
}
export function PreviewDatePicker() {
    const editContext = useEditContext();
    const [open, setOpen] = React.useState(false);
    if (!editContext)
        return null;
    const previewDate = editContext.previewDate;
    const pickerDate = previewDate ?? new Date();
    const timeValue = toTimeValue(pickerDate);
    const setPreviewDateFromCalendar = (selectedDate) => {
        if (!selectedDate) {
            editContext.setPreviewDate(undefined);
            return;
        }
        editContext.setPreviewDate(withDateParts(pickerDate, selectedDate));
    };
    const setPreviewDateFromTime = (event) => {
        const nextDate = withTimeValue(pickerDate, event.target.value);
        if (nextDate) {
            editContext.setPreviewDate(nextDate);
        }
    };
    const resetToNow = () => {
        editContext.setPreviewDate(undefined);
        setOpen(false);
    };
    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "select", "aria-expanded": open, "data-testid": "preview-date-picker", "data-preview-date": previewDate?.toISOString() ?? "now", className: cn("border-transparent md:w-[170px] md:min-w-[170px]", previewDate && "text-neutral-grey-100"), children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(CalendarClock, { className: "h-4 w-4", strokeWidth: 1 }), _jsx("span", { className: "min-w-0 truncate", children: getPreviewDateLabel(previewDate) })] }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: _jsxs("div", { className: "space-y-2 p-3", onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: [_jsx(Calendar, { mode: "single", selected: previewDate, defaultMonth: pickerDate, onSelect: setPreviewDateFromCalendar, className: "p-0 text-xs [&_.rdp-caption_label]:text-xs [&_.rdp-day_button]:text-xs [&_.rdp-week_number]:text-xs [&_.rdp-weekday]:text-xs", "data-testid": "preview-date-picker-calendar" }), _jsxs("div", { className: "border-border-default flex items-center justify-between gap-3 border-t pt-3", children: [_jsxs("label", { className: "text-muted-foreground flex items-center gap-1.5 text-xs font-medium", htmlFor: "preview-date-picker-time-input", children: [_jsx(Clock, { className: "h-3.5 w-3.5", strokeWidth: 1 }), "Time"] }), _jsx(Input, { id: "preview-date-picker-time-input", type: "time", step: 60, value: timeValue, onChange: setPreviewDateFromTime, className: "h-8 w-28 px-2 text-xs", "data-testid": "preview-date-picker-time-input" })] }), _jsx("div", { className: "flex items-center justify-end gap-2", children: _jsxs(Button, { variant: "ghost", size: "xs", onClick: resetToNow, "data-testid": "preview-date-picker-reset", children: [_jsx(RotateCcw, { className: "h-3 w-3", strokeWidth: 1 }), "Now"] }) })] }) })] }));
}
//# sourceMappingURL=PreviewDatePicker.js.map