import React, { useState, useMemo, isValidElement } from "react";
import { useTranslation } from "react-i18next";
import { Accordion } from "../Accordion";
import { Tabs } from "../Tabs";
import * as styles from "./styles";
import { sectionKeys, sectionIcons } from "./constants";
import { useTracking } from "~/tracking";
import { useNeighborhoodDemographics } from "~/sdks/NeighborhoodDemographics/context";
import { useResponsiveBreakpoints } from "~/hooks/useResponsiveBreakpoints";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/NeighborhoodDemographics/types";
export const Container = ({ className, children, }) => {
    const { t } = useTranslation("neighborhoodDemographics");
    const tracking = useTracking();
    const currentBreakpoints = useResponsiveBreakpoints();
    const [activeSectionIndex, setActiveSectionIndex] = useState(0);
    const { demographicsData } = useNeighborhoodDemographics();
    const omitTabs = useMemo(() => {
        if (!demographicsData) {
            return [];
        }
        const tabsToOmit = [];
        const dataKeys = {
            income: "income",
            population: "population_age",
            housing: "housing_tenancy",
            household: "household_composition",
            commute: "commute_mode",
            education: "education_level",
            languages: "mother_tongue",
        };
        Object.entries(dataKeys).forEach(([key, value]) => {
            if (!Object.keys(demographicsData).includes(value)) {
                tabsToOmit.push(key);
            }
        });
        return tabsToOmit;
    }, [demographicsData]);
    const sectionHeaders = useMemo(() => sectionKeys
        .filter((value) => !omitTabs.includes(value))
        .map((key) => ({
        title: t(`data.${key}.title`),
        icon: sectionIcons[key],
        key,
    })), [omitTabs]);
    // Uses the name of the component to figure out if it should be displayed or not
    const sectionChildren = useMemo(() => children.filter((child) => isValidElement(child) &&
        typeof child.type === "function" &&
        !omitTabs.includes(child.type.name.toLocaleLowerCase())), [children, omitTabs]);
    const tabAdaptedActiveSectionIndex = useMemo(() => currentBreakpoints && currentBreakpoints.lg && activeSectionIndex < 0
        ? 0
        : activeSectionIndex, [currentBreakpoints, activeSectionIndex]);
    const handleOnTabChange = (index) => {
        setActiveSectionIndex(index);
        if (activeSectionIndex !== index &&
            typeof sectionHeaders[index] !== "undefined") {
            tracking.postEvent({
                eventType: TrackingPipelineEvents.CATEGORY_CLICKED,
                eventAttributes: [
                    {
                        label: "category",
                        data: sectionHeaders[index].key,
                    },
                ],
            });
            tracking.trackAnalyticsEvent({
                eventName: AnalyticsEvents.CATEGORY_CLICKED,
                eventAttributes: {
                    ll_category: sectionHeaders[index].key,
                },
            });
        }
    };
    if (activeSectionIndex > children.length - 1) {
        // This should never really happen, but in case there aren't enough children, we'll display this error in the console
        console.error("Invalid tab content accessor. Index does not exist on the supplied list of nodes.");
    }
    return (React.createElement("div", { className: `${styles.wrapper} ${className || ""}` },
        currentBreakpoints && !currentBreakpoints.lg && (React.createElement(Accordion, { sectionHeaders: sectionHeaders, activeTabIndex: tabAdaptedActiveSectionIndex, onTabChange: handleOnTabChange }, sectionChildren[tabAdaptedActiveSectionIndex])),
        currentBreakpoints && currentBreakpoints.lg && (React.createElement(Tabs, { sectionHeaders: sectionHeaders, activeTabIndex: tabAdaptedActiveSectionIndex, onTabChange: handleOnTabChange }, sectionChildren[tabAdaptedActiveSectionIndex]))));
};
//# sourceMappingURL=index.js.map