import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import * as DemographicsTabs from "./DemographicsTabs";
import * as ChartLayout from "./ChartLayout";
import * as styles from "./styles";
import { useDemographicsData } from "~/hooks/useDemographicsData";
import { useDemographics } from "~/sdks/LocalDemographics/context";
import { DEFAULT_RADIUS, DEFAULT_RADIUS_UNIT, } from "~/sdks/LocalDemographics/constants";
import { LoadingSpinner, Text } from "~/components/deprecated";
export const Content = () => {
    const { t } = useTranslation("localDemographics");
    const { demographicsState, activeCategory, setDemographicsState } = useDemographics();
    const { data: demographicsData, isFetching: isDemographicsFetching } = useDemographicsData({
        lat: demographicsState.location.lat,
        lng: demographicsState.location.lng,
        radius: DEFAULT_RADIUS,
        radiusUnit: DEFAULT_RADIUS_UNIT,
    });
    useEffect(() => {
        if (!isDemographicsFetching && demographicsData) {
            setDemographicsState(Object.assign({}, demographicsData));
        }
    }, [isDemographicsFetching]);
    const GetActiveTabContent = () => {
        if (isDemographicsFetching) {
            return (React.createElement("div", { className: styles.spinner },
                React.createElement(LoadingSpinner, null)));
        }
        if (demographicsData === undefined) {
            return (React.createElement("div", { className: styles.noDataElement },
                React.createElement(Text, { variant: "h6", weight: "--ll-font-weight-bold" }, t("noData"))));
        }
        switch (activeCategory) {
            case "income":
                return React.createElement(ChartLayout.Income, null);
            case "population":
                return React.createElement(ChartLayout.Population, null);
            case "housing":
                return React.createElement(ChartLayout.Housing, null);
            case "household":
                return React.createElement(ChartLayout.Household, null);
            case "commute":
                return React.createElement(ChartLayout.Commute, null);
            case "education":
                return React.createElement(ChartLayout.Education, null);
            case "languages":
                return React.createElement(ChartLayout.Languages, null);
            default:
                return React.createElement("div", null,
                    activeCategory,
                    " tab");
        }
    };
    return (React.createElement(DemographicsTabs.Content, { options: { value: activeCategory } },
        React.createElement(ChartLayout.Root, null, GetActiveTabContent())));
};
//# sourceMappingURL=index.js.map