import React from "react";
import { useTranslation } from "react-i18next";
import * as styles from "./styles";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/LocalContent/types";
import { useTracking } from "~/tracking";
import { PoiIconDeprecated } from "~/components/PoiIcon";
export function Subcategories({ scoreKey, availablePoiSubcategories, selectedSubcategory, onSelectCategory, }) {
    const { t } = useTranslation(["localContent", "common"]);
    const tracking = useTracking();
    const handleSubcategoryClick = (subcategory) => () => {
        if (selectedSubcategory === subcategory) {
            return;
        }
        onSelectCategory(subcategory);
        const eventAttributes = {
            score: scoreKey,
            category: subcategory,
        };
        tracking.postEvent({
            eventType: TrackingPipelineEvents.SCORE_POI_CATEGORY_SELECTED,
            eventAttributes: Object.entries(eventAttributes).map(([key, value]) => ({
                label: key,
                data: value,
            })),
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.SCORE_POI_CATEGORY_SELECTED,
            eventAttributes,
        });
    };
    // While we require availablePoiSubcategories to be defined, we should handle when it's undefined
    if (typeof availablePoiSubcategories === "undefined" ||
        availablePoiSubcategories.length <= 1) {
        return null;
    }
    return (React.createElement("div", { className: styles.container, "data-testid": "score-poi-list-subcategories" }, availablePoiSubcategories.length > 0 && (React.createElement("div", { className: styles.subcategories, "data-testid": "score-poi-list-subcategories-list" }, availablePoiSubcategories.map((subcategory) => (React.createElement("button", { "data-testid": `score-poi-list-subcategory-${subcategory}`, className: styles.button, "data-is-active": selectedSubcategory === subcategory, key: `score-poi-list-subcategory-${subcategory}`, onClick: handleSubcategoryClick(subcategory) },
        React.createElement(PoiIconDeprecated, { poi: subcategory }),
        t(`common:pois.${subcategory}`))))))));
}
//# sourceMappingURL=index.js.map