import React from "react";
import { useTranslation } from "react-i18next";
import * as styles from "./styles";
import { useTracking } from "~/tracking";
import { useLocalContent } from "~/sdks/LocalContent/context";
import { ScoreIcon } from "~/components/ScoreIcon";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/LocalContent/types";
export function ScoresPillList({ scores, backgroundColor, fillColor, }) {
    const tracking = useTracking();
    const { t } = useTranslation(["common"]);
    const { activeScore, isCommuteCalculatorOpen, handleSelectScore: onSelectScore, handleToggleIsCommuteCalculatorOpen, } = useLocalContent();
    const handleSelectScore = (scoreKey) => () => {
        onSelectScore(scoreKey)();
        const eventAttributes = {
            scoreKey,
            isExpanded: activeScore === scoreKey,
        };
        if (isCommuteCalculatorOpen) {
            handleToggleIsCommuteCalculatorOpen();
        }
        tracking.postEvent({
            eventType: TrackingPipelineEvents.CATEGORIES_MENU_SCORE_SELECTED,
            eventAttributes: Object.entries(eventAttributes).map(([key, value]) => ({
                label: key,
                data: value,
            })),
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.CATEGORIES_MENU_SCORE_SELECTED,
            eventAttributes,
        });
    };
    if (typeof scores === "undefined" || scores.length === 0) {
        return null;
    }
    return (React.createElement("div", { "data-testid": "scores-pill-list", className: styles.container, style: {
            "--background": backgroundColor,
            "--fill": fillColor,
        } }, scores.map((score) => (React.createElement("button", { key: score, "data-is-active": score === activeScore, "data-score": score, "data-testid": "score-pill-item", onClick: handleSelectScore(score), className: styles.item, "aria-label": t(`common:scores.${score}.title`) },
        React.createElement(ScoreIcon, { "data-testid": "score-pill-icon", score: score, className: styles.icon }),
        React.createElement("span", { "data-testid": "score-pill-title", className: styles.title }, t(`common:scores.${score}.title`)))))));
}
//# sourceMappingURL=index.js.map