import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { UsersThreeIcon } from "@phosphor-icons/react";
import * as styles from "../../styles";
import { DonutChart } from "~/components/deprecated";
import { useNeighborhoodDemographics } from "~/sdks/NeighborhoodDemographics/context";
export const HouseholdComposition = () => {
    const { t } = useTranslation("neighborhoodDemographics");
    const { demographicsData: { household_composition: householdComposition }, } = useNeighborhoodDemographics();
    const householdFormatted = useMemo(() => householdComposition === null || householdComposition === void 0 ? void 0 : householdComposition.variables.map((variable) => (Object.assign(Object.assign({}, variable), { value: Number((variable.value * 100).toFixed(1)) }))).filter((variable) => (!variable.type || variable.type === "percent") &&
        Number((variable.value * 100).toFixed(1)) > 0), [householdComposition === null || householdComposition === void 0 ? void 0 : householdComposition.variables]);
    const dataset = useMemo(() => ({
        labels: (householdFormatted === null || householdFormatted === void 0 ? void 0 : householdFormatted.map((variable) => `${variable.value}% ${variable.label}`)) || [],
        data: (householdFormatted === null || householdFormatted === void 0 ? void 0 : householdFormatted.map((variable) => variable.value)) || [],
    }), [householdFormatted]);
    const chartOptions = useMemo(() => ({
        title: t("data.household.graphs.householdComposition.title"),
        labels: dataset.labels,
        data: dataset.data,
        icon: React.createElement(UsersThreeIcon, { className: styles.donutChartIcon }),
    }), [dataset]);
    return React.createElement(DonutChart, Object.assign({}, chartOptions));
};
//# sourceMappingURL=index.js.map