import React from "react";
import { useTranslation } from "react-i18next";
import { HorizontalScrollFilters } from "@local-logic/design-system";
import { TrainIcon, PencilRulerIcon, ShoppingCartIcon, ConfettiIcon, PlantIcon, FlowerLotusIcon, } from "@phosphor-icons/react";
import * as styles from "./styles";
import { useTracking } from "~/tracking";
import { useResponsiveBreakpoints } from "~/hooks/useResponsiveBreakpoints";
import { useLocalContent } from "~/sdks/LocalContent/context";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/LocalContent/types";
const categoryIcons = {
    transport: TrainIcon,
    education: PencilRulerIcon,
    amenities: ShoppingCartIcon,
    character: ConfettiIcon,
    nature: FlowerLotusIcon,
    health: PlantIcon,
};
export function Header({ scores }) {
    const tracking = useTracking();
    const { activeCategory, handleSelectCategory: onSelectCategory } = useLocalContent();
    const { t } = useTranslation("localContent");
    const breakpoints = useResponsiveBreakpoints();
    const handleSelectCategory = (categoryKey) => () => {
        onSelectCategory(categoryKey)();
        if (categoryKey === null) {
            return;
        }
        const eventAttributes = {
            category: categoryKey,
            isExpanded: activeCategory === categoryKey,
        };
        tracking.postEvent({
            eventType: TrackingPipelineEvents.CATEGORIES_MENU_CATEGORY_SELECTED,
            eventAttributes: Object.entries(eventAttributes).map(([key, value]) => ({
                label: key,
                data: value,
            })),
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.CATEGORIES_MENU_CATEGORY_SELECTED,
            eventAttributes,
        });
    };
    if (breakpoints.sm || scores.categories.length === 0) {
        return null;
    }
    return (React.createElement("div", { className: styles.container, "data-testid": "categories-mobile-header" },
        React.createElement(HorizontalScrollFilters.Root, null,
            React.createElement(HorizontalScrollFilters.ScrollList, null, scores.categories.map(([categoryKey, categoryValue]) => {
                var _a, _b;
                return (React.createElement(HorizontalScrollFilters.Filter, { key: `category-${categoryKey}`, filter: categoryKey, label: t(`categories.${categoryKey}`), icon: categoryIcons[categoryKey], iconBackgroundColor: (_a = categoryValue.colors) === null || _a === void 0 ? void 0 : _a.background, iconFillColor: (_b = categoryValue.colors) === null || _b === void 0 ? void 0 : _b.fill, isActive: categoryKey === activeCategory, onSelectFilter: handleSelectCategory(categoryKey) }));
            })))));
}
//# sourceMappingURL=index.js.map