import React from "react";
import { useTranslation } from "react-i18next";
import { CaretDoubleLeftIcon } from "@phosphor-icons/react";
import { useRootElement } from "../context";
import { Title } from "./Title";
import { CloseButton } from "./CloseButton";
import * as styles from "./styles";
import { useTracking } from "~/tracking";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/LocalContent/types";
export function Header({ title }) {
    const { t } = useTranslation("localContent");
    const tracking = useTracking();
    const { activeScore, isExpanded, onToggleIsExpanded } = useRootElement();
    const handleOnArrowClick = (event) => {
        event.stopPropagation();
        const eventAttributes = {
            currentActiveScore: activeScore || "none",
            currentIsExpanded: isExpanded,
        };
        tracking.postEvent({
            eventType: TrackingPipelineEvents.SIDEBAR_TOGGLE_CLICKED,
            eventAttributes: Object.entries(eventAttributes).map(([key, value]) => ({
                label: key,
                data: value,
            })),
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.SIDEBAR_TOGGLE_CLICKED,
            eventAttributes,
        });
        onToggleIsExpanded();
    };
    return (React.createElement("div", { className: styles.container, "data-testid": "sidebar-header" },
        isExpanded && !activeScore && React.createElement(Title, { title: title }),
        isExpanded && activeScore && React.createElement(CloseButton, null),
        React.createElement("button", { type: "button", onClick: handleOnArrowClick, "aria-label": t("sidebar.header.toggle.ariaLabel", {
                context: isExpanded ? "close" : "open",
            }), "aria-pressed": isExpanded, "data-testid": "sidebar-header-toggle" },
            React.createElement(CaretDoubleLeftIcon, { className: styles.icon, "aria-hidden": "true", focusable: "false", "data-testid": "sidebar-header-toggle-icon" }))));
}
//# sourceMappingURL=index.js.map