import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useNeighborhoodDemographics } from "~/sdks/NeighborhoodDemographics/context";
import { Chart } from "~/components/deprecated";
export const PopulationByAgeGroup = () => {
    const { t } = useTranslation("neighborhoodDemographics");
    const { demographicsData: { population_age: populationAge }, } = useNeighborhoodDemographics();
    const populationAgeFormatted = useMemo(() => {
        if (!populationAge) {
            return null;
        }
        const filteredVariables = populationAge === null || populationAge === void 0 ? void 0 : populationAge.variables.filter((variable) => !variable.type || variable.type === "percent").sort((a, b) => Number(a.variable.split("_")[1]) - Number(b.variable.split("_")[1]));
        if ((populationAge === null || populationAge === void 0 ? void 0 : populationAge.variables.length) > 12) {
            const keys = filteredVariables.map((e) => {
                const labels = e.label.split(" ");
                labels.splice(1, 1);
                return labels;
            });
            const mergedPopulation = [];
            keys.forEach((element, index) => {
                if (index === 0 || index % 2 === 0) {
                    mergedPopulation.push({
                        variable: `age_${element[0]}_${keys[index + 1][1]}`,
                        value: filteredVariables[index].value +
                            filteredVariables[index + 1].value,
                        label: `${element[0]} to ${keys[index + 1][1]}`,
                    });
                }
            });
            return mergedPopulation;
        }
        return filteredVariables;
    }, [populationAge]);
    const dataset = useMemo(() => ({
        labels: (populationAgeFormatted === null || populationAgeFormatted === void 0 ? void 0 : populationAgeFormatted.map((variable) => variable.label)) ||
            [],
        data: (populationAgeFormatted === null || populationAgeFormatted === void 0 ? void 0 : populationAgeFormatted.map((variable) => Number((variable.value * 100).toFixed(1)))) || [],
    }), [populationAgeFormatted]);
    const chartOptions = useMemo(() => ({
        title: t("data.population.graphs.populationByAgeGroup.title"),
        labels: dataset.labels,
        data: dataset.data,
        unit: "%",
    }), [dataset]);
    return (React.createElement(Chart.Root, Object.assign({}, chartOptions),
        React.createElement(Chart.BarChart, null)));
};
//# sourceMappingURL=index.js.map