import React, { useState, useRef, useEffect, useCallback, } from "react";
import Icon from "../../Icon/Icon";
import IconProp from "../../../../Types/Icon/IconProp";
import TimeRange from "../../../../Types/Time/TimeRange";
import StartAndEndDate, { StartAndEndDateType, } from "../../Date/StartAndEndDate";
// Preset options to show in the dropdown (ordered for log investigation use)
const PRESET_OPTIONS = [
    { range: TimeRange.PAST_FIVE_MINS, label: "Past 5 Minutes" },
    { range: TimeRange.PAST_FIFTEEN_MINS, label: "Past 15 Minutes" },
    { range: TimeRange.PAST_THIRTY_MINS, label: "Past 30 Minutes" },
    { range: TimeRange.PAST_ONE_HOUR, label: "Past 1 Hour" },
    { range: TimeRange.PAST_TWO_HOURS, label: "Past 2 Hours" },
    { range: TimeRange.PAST_THREE_HOURS, label: "Past 3 Hours" },
    { range: TimeRange.PAST_ONE_DAY, label: "Past 1 Day" },
    { range: TimeRange.PAST_TWO_DAYS, label: "Past 2 Days" },
    { range: TimeRange.PAST_ONE_WEEK, label: "Past 1 Week" },
    { range: TimeRange.PAST_TWO_WEEKS, label: "Past 2 Weeks" },
    { range: TimeRange.PAST_ONE_MONTH, label: "Past 1 Month" },
    { range: TimeRange.PAST_THREE_MONTHS, label: "Past 3 Months" },
];
function formatDateShort(date) {
    const month = date.toLocaleString("en-US", { month: "short" });
    const day = date.getDate();
    const hours = date.getHours().toString().padStart(2, "0");
    const minutes = date.getMinutes().toString().padStart(2, "0");
    return `${month} ${day}, ${hours}:${minutes}`;
}
function getButtonLabel(value) {
    if (value.range === TimeRange.CUSTOM && value.startAndEndDate) {
        const start = formatDateShort(value.startAndEndDate.startValue);
        const end = formatDateShort(value.startAndEndDate.endValue);
        return `${start} – ${end}`;
    }
    const preset = PRESET_OPTIONS.find((opt) => {
        return opt.range === value.range;
    });
    return preset ? preset.label : value.range;
}
const LogTimeRangePicker = (props) => {
    const [isOpen, setIsOpen] = useState(false);
    const [showCustom, setShowCustom] = useState(props.value.range === TimeRange.CUSTOM);
    const containerRef = useRef(null);
    // Close on click outside
    useEffect(() => {
        const handleClickOutside = (e) => {
            if (containerRef.current &&
                !containerRef.current.contains(e.target)) {
                setIsOpen(false);
            }
        };
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);
    // Sync showCustom when value changes externally (e.g., histogram drag)
    useEffect(() => {
        setShowCustom(props.value.range === TimeRange.CUSTOM);
    }, [props.value.range]);
    const handlePresetSelect = useCallback((range) => {
        props.onChange({ range });
        setShowCustom(false);
        setIsOpen(false);
    }, [props]);
    const handleCustomDateChange = useCallback((dateRange) => {
        if (dateRange) {
            props.onChange({
                range: TimeRange.CUSTOM,
                startAndEndDate: dateRange,
            });
        }
    }, [props]);
    const buttonLabel = getButtonLabel(props.value);
    return (React.createElement("div", { ref: containerRef, className: "relative" },
        React.createElement("button", { type: "button", className: `inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors ${isOpen
                ? "border-indigo-300 bg-indigo-50 text-indigo-700"
                : "border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50"}`, onClick: () => {
                setIsOpen(!isOpen);
            } },
            React.createElement(Icon, { icon: IconProp.Clock, className: "h-3.5 w-3.5" }),
            React.createElement("span", null, buttonLabel),
            React.createElement(Icon, { icon: IconProp.ChevronDown, className: `h-3 w-3 transition-transform ${isOpen ? "rotate-180" : ""}` })),
        isOpen && (React.createElement("div", { className: "absolute right-0 top-full z-50 mt-1 w-72 rounded-lg border border-gray-200 bg-white shadow-lg" },
            React.createElement("div", { className: "max-h-64 overflow-y-auto py-1" },
                PRESET_OPTIONS.map((option) => {
                    const isActive = props.value.range === option.range;
                    return (React.createElement("button", { key: option.range, type: "button", className: `flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${isActive
                            ? "bg-indigo-50 font-medium text-indigo-700"
                            : "text-gray-700 hover:bg-gray-50"}`, onClick: () => {
                            handlePresetSelect(option.range);
                        } }, option.label));
                }),
                React.createElement("button", { type: "button", className: `flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${props.value.range === TimeRange.CUSTOM
                        ? "bg-indigo-50 font-medium text-indigo-700"
                        : "text-gray-700 hover:bg-gray-50"}`, onClick: () => {
                        setShowCustom(true);
                    } }, "Custom Range...")),
            showCustom && (React.createElement("div", { className: "border-t border-gray-100 p-3" },
                React.createElement(StartAndEndDate, { type: StartAndEndDateType.DateTime, value: props.value.startAndEndDate, hideTimeButtons: true, onValueChanged: handleCustomDateChange })))))));
};
export default LogTimeRangePicker;
//# sourceMappingURL=LogTimeRangePicker.js.map