import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { useMemo, useRef, useState } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { UiChip, UiListbox, UiPopover, UiTooltip } from "@gooddata/sdk-ui-kit";
import { formatKeyDriverAnalysisDateRange } from "../../utils.js";
export function DateBar(props) {
    const intl = useIntl();
    const ref = useRef(null);
    const [isActive, setIsActive] = useState(false);
    const listboxId = "kda-dialog-date-bar";
    const splitter = intl.formatMessage({ id: "kdaDialog.dialog.bars.date.splitter" });
    const label = intl.formatMessage({ id: "kdaDialog.dialog.bars.date.title" }, {
        title: formatKeyDriverAnalysisDateRange(props.options?.range, splitter),
    });
    const items = useMemo(() => {
        return [
            {
                type: "interactive",
                id: "same_period_previous_year",
                stringTitle: intl.formatMessage({
                    id: "kdaDialog.dialog.bars.date.period.samePeriodPreviousYear",
                }),
                data: "same_period_previous_year",
            },
            {
                type: "interactive",
                id: "previous_period",
                stringTitle: intl.formatMessage({ id: "kdaDialog.dialog.bars.date.period.previousPeriod" }),
                data: "previous_period",
            },
        ];
    }, [intl]);
    return (_jsx("div", { className: cx("gd-kda-dialog-bar__date"), children: _jsx(UiTooltip, { arrowPlacement: "top-start", content: label, optimalPlacement: true, triggerBy: ["hover", "focus"], anchor: _jsx(UiPopover, { disabled: !props.isAvailable, anchor: _jsx(UiChip, { label: label, iconBefore: "date", isExpandable: true, isDisabled: !props.isAvailable, isActive: isActive, accessibilityConfig: {
                        isExpanded: isActive,
                        ariaHaspopup: "listbox",
                        popupId: listboxId,
                    } }), title: intl.formatMessage({ id: "kdaDialog.dialog.bars.date.period.title" }), initialFocus: ref, content: ({ onClose }) => (_jsx("div", { className: cx("gd-kda-dialog-bar__date-select"), children: _jsx(UiListbox, { reference: ref, selectedItemId: props.options.period, items: items, ariaAttributes: {
                            id: listboxId,
                        }, onClose: onClose, onSelect: (item) => {
                            props.onPeriodChange(item.data);
                        } }) })), onOpen: () => setIsActive(true), onClose: () => setIsActive(false) }) }) }));
}
//# sourceMappingURL=DateBar.js.map