import React from "react";
import { useTranslation } from "react-i18next";
import { useRootElement } from "../context";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/LocalContent/types";
import { useTracking } from "~/tracking";
import { ScoreIcon } from "~/components/ScoreIcon";
import { ItemButton } from "~/sdks/LocalContent/components/ItemButton";
export function Score({ scoreKey, backgroundColor, fillColor, }) {
    const { t } = useTranslation(["common"]);
    const tracking = useTracking();
    const { isExpanded, activeScore, onSelectScore } = useRootElement();
    const handleOnSelectScore = (score) => () => {
        if (typeof onSelectScore === "undefined") {
            return;
        }
        onSelectScore(score)();
        const eventAttributes = {
            scoreKey: score,
            isSidebarExpanded: isExpanded,
        };
        tracking.postEvent({
            eventType: TrackingPipelineEvents.SIDEBAR_SCORE_SELECTED,
            eventAttributes: Object.entries(eventAttributes).map(([key, value]) => ({
                label: key,
                data: value,
            })),
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.SIDEBAR_SCORE_SELECTED,
            eventAttributes,
        });
    };
    return (React.createElement(ItemButton, { text: t(`common:scores.${scoreKey}.title`), isDisabled: !isExpanded, isCollapsed: !isExpanded, isActive: activeScore === scoreKey, icon: {
            element: React.createElement(ScoreIcon, { score: scoreKey }),
            backgroundColor,
            fillColor,
        }, onClick: handleOnSelectScore(scoreKey), "data-testid": "sidebar-score-item", "data-score": scoreKey }));
}
//# sourceMappingURL=index.js.map