"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { CalendarClock, RotateCcw } from "lucide-react";
import { useEditContext } from "../client/editContext";
import { cn } from "../../lib/utils";
import { Button } from "../../components/ui/button";
import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
function padDatePart(value) {
    return value.toString().padStart(2, "0");
}
function toDateTimeLocalValue(date) {
    return [
        date.getFullYear(),
        "-",
        padDatePart(date.getMonth() + 1),
        "-",
        padDatePart(date.getDate()),
        "T",
        padDatePart(date.getHours()),
        ":",
        padDatePart(date.getMinutes()),
    ].join("");
}
function parseDateTimeLocalValue(value) {
    if (!value)
        return undefined;
    const date = new Date(value);
    return isNaN(date.getTime()) ? undefined : date;
}
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 inputValue = toDateTimeLocalValue(previewDate ?? new Date());
    const setPreviewDateFromInput = (event) => {
        editContext.setPreviewDate(parseDateTimeLocalValue(event.target.value));
    };
    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("md:min-w-[150px]", previewDate && "border-theme-secondary text-theme-secondary"), 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) })] }) }) }), _jsxs(PopoverContent, { className: "w-72 space-y-3 p-3", align: "start", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("label", { className: "text-xs font-medium text-muted-foreground", htmlFor: "preview-date-picker-input", children: "Preview date and time" }), _jsx("input", { id: "preview-date-picker-input", type: "datetime-local", step: 60, value: inputValue, onChange: setPreviewDateFromInput, className: "h-8 w-full rounded border border-gray-3 bg-background px-2 text-xs outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50", "data-testid": "preview-date-picker-input" })] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-2xs text-muted-foreground", children: "Sitecore resolves the preview at this time." }), _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