import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { BackpackIcon, GraduationCapIcon } from "@phosphor-icons/react";
import { Filter } from "../Filter";
import { SchoolsTable } from "../SchoolsTable";
import { SchoolsList } from "../SchoolsList";
import { Footer } from "../Footer";
import * as styles from "./styles";
import { TitleHeader } from "~/components/TitleHeader";
import { useNeighborhoodSchools } from "~/sdks/NeighborhoodSchools/context";
import { AnalyticsEvents, TrackingPipelineEvents, } from "~/sdks/NeighborhoodSchools/types";
import { useStateManagerContext } from "~/context/stateManager";
import useIsMobile from "~/hooks/useIsMobile";
import { useTracking } from "~/tracking";
export const Content = () => {
    var _a, _b, _c;
    const { t } = useTranslation("neighborhoodSchools");
    const tracking = useTracking();
    const { sdkState } = useStateManagerContext();
    const { filteredSchools, schoolLevels, schoolTypes, filterLevel, filterType, setFilterLevel, setFilterType, } = useNeighborhoodSchools();
    const isMobile = useIsMobile();
    const schoolTypeOptions = schoolTypes.map((type) => ({
        value: type,
        label: type,
    }));
    const schoolLevelOptions = schoolLevels.map((level) => ({
        value: level,
        label: level,
    }));
    useEffect(() => {
        if (filterType !== undefined) {
            tracking.postEvent({
                eventType: TrackingPipelineEvents.FILTER_BY_TYPE,
                eventAttributes: [
                    {
                        label: "filter_by_type",
                        data: filterType,
                    },
                ],
            });
            tracking.trackAnalyticsEvent({
                eventName: AnalyticsEvents.FILTER_BY_TYPE,
                eventAttributes: {
                    filter_by_type: filterType,
                },
            });
        }
        if (filterLevel !== undefined) {
            tracking.postEvent({
                eventType: TrackingPipelineEvents.FILTER_BY_LEVEL,
                eventAttributes: [
                    {
                        label: "filter_by_level",
                        data: filterLevel,
                    },
                ],
            });
            tracking.trackAnalyticsEvent({
                eventName: AnalyticsEvents.FILTER_BY_LEVEL,
                eventAttributes: {
                    filter_by_level: filterLevel,
                },
            });
        }
    }, [filterLevel, filterType]);
    return (React.createElement(React.Fragment, null,
        React.createElement(TitleHeader, { title: typeof ((_a = sdkState.options) === null || _a === void 0 ? void 0 : _a.title) === "string" ||
                ((_b = sdkState.options) === null || _b === void 0 ? void 0 : _b.title) === false
                ? sdkState.options.title
                : t("title") }),
        React.createElement("div", { className: styles.filters },
            React.createElement(Filter, { options: schoolTypeOptions, icon: BackpackIcon, label: t("headers.type"), allLabel: t("headers.typesFilter"), activeFilter: filterType, handleFilterChange: (type) => setFilterType(type) }),
            React.createElement(Filter, { options: schoolLevelOptions, icon: GraduationCapIcon, label: t("headers.levels"), allLabel: t("headers.levelsFilter"), activeFilter: filterLevel, handleFilterChange: (level) => setFilterLevel(level) })),
        isMobile ? (React.createElement(SchoolsList, { schools: filteredSchools })) : (React.createElement(SchoolsTable, { schools: filteredSchools })),
        React.createElement(Footer, { hideAttribution: (_c = sdkState.options) === null || _c === void 0 ? void 0 : _c.hideAttribution })));
};
//# sourceMappingURL=index.js.map