import React, { useMemo, useState, useEffect } from "react";
import { useFlags } from "launchdarkly-react-client-sdk";
import { useTranslation } from "react-i18next";
import { HorizontalScrollFilters } from "@local-logic/design-system";
import { Map } from "../Map";
import * as styles from "./styles";
import { useNeighborhoodMap } from "~/sdks/NeighborhoodMap/context";
import { useTracking } from "~/tracking";
import { Attribution } from "~/components/Attribution";
import { icons as poiIcons } from "~/components/PoiIcon";
import { categories } from "~/sdks/NeighborhoodMap/constants";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/NeighborhoodMap/types";
export const Content = () => {
    const { t } = useTranslation(["neighborhoodMap", "common"]);
    const flags = useFlags();
    const tracking = useTracking();
    const { locale, handleMarkerClick, activePoiCategory, onSelectPoiCategory, hideAttribution, } = useNeighborhoodMap();
    const [dialogSelectedPoiCategory, setDialogSelectedPoiCategory] = useState();
    useEffect(() => {
        handleMarkerClick(undefined);
        setDialogSelectedPoiCategory(activePoiCategory);
    }, [activePoiCategory]);
    const poiCategories = useMemo(() => categories.map((category) => ({
        key: category,
        icon: poiIcons[category],
    })), [flags]);
    const handleOnSelectCategory = (category) => {
        onSelectPoiCategory(category);
        tracking.postEvent({
            eventType: TrackingPipelineEvents.CATEGORY_CLICKED,
            eventAttributes: [
                {
                    label: "category",
                    data: category,
                },
            ],
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.CATEGORY_CLICKED,
            eventAttributes: {
                ll_category: category,
            },
        });
    };
    const handleOnDialogSelectCategory = (category) => {
        setDialogSelectedPoiCategory(dialogSelectedPoiCategory === category ? undefined : category);
    };
    const handleResetFilters = () => {
        onSelectPoiCategory(undefined);
    };
    const handleApplyFilter = () => {
        onSelectPoiCategory(dialogSelectedPoiCategory);
    };
    return (React.createElement("div", { className: styles.container },
        React.createElement(HorizontalScrollFilters.Root, null,
            React.createElement("div", { className: styles.header },
                React.createElement(HorizontalScrollFilters.ScrollList, { activeFilter: activePoiCategory, leftArrowAriaLabel: t("filters.navigation.scrollLeftAriaLabel"), rightArrowAriaLabel: t("filters.navigation.scrollRightAriaLabel") }, poiCategories.map(({ key, icon }) => (React.createElement(HorizontalScrollFilters.Filter, { key: `category-${key}`, filter: key, label: t(`common:pois.${key}`), icon: icon, isActive: key === activePoiCategory, onSelectFilter: handleOnSelectCategory })))),
                React.createElement(HorizontalScrollFilters.DialogTrigger, { label: t("filters.navigation.allFiltersAriaLabel") })),
            React.createElement(HorizontalScrollFilters.Dialog, { title: t("filters.popup.title"), description: t("filters.popup.description"), applyLabel: t("filters.popup.cta.apply"), resetLabel: t("filters.popup.cta.reset"), onReset: handleResetFilters, onApply: handleApplyFilter }, poiCategories.map(({ key, icon }) => (React.createElement(HorizontalScrollFilters.Filter, { key: `dialog-category-${key}`, filter: key, label: t(`common:pois.${key}`), icon: icon, isActive: key === dialogSelectedPoiCategory, onSelectFilter: handleOnDialogSelectCategory }))))),
        React.createElement(Map, null),
        React.createElement(Attribution, { sdkName: "neighborhood-map", locale: locale, isHidden: hideAttribution })));
};
//# sourceMappingURL=index.js.map