import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { TranslateIcon } from "@phosphor-icons/react";
import * as styles from "../../styles";
import { DonutChart } from "~/components/deprecated";
import { useDemographics } from "~/sdks/LocalDemographics/context";
export const SpokenLanguages = () => {
    const { t } = useTranslation("localDemographics");
    const { demographicsState: { official_language_knowledge: oficialLanguages }, } = useDemographics();
    const oficialLanguagesFormatted = useMemo(() => oficialLanguages === null || oficialLanguages === void 0 ? void 0 : oficialLanguages.variables.map((variable) => (Object.assign(Object.assign({}, variable), { value: Number((variable.value * 100).toFixed(1)) }))).filter((variable) => Number((variable.value * 100).toFixed(1)) > 0), [oficialLanguages === null || oficialLanguages === void 0 ? void 0 : oficialLanguages.variables]);
    const dataset = useMemo(() => ({
        labels: (oficialLanguagesFormatted === null || oficialLanguagesFormatted === void 0 ? void 0 : oficialLanguagesFormatted.map((variable) => `${variable.value}% ${variable.label}`)) || [],
        data: (oficialLanguagesFormatted === null || oficialLanguagesFormatted === void 0 ? void 0 : oficialLanguagesFormatted.map((variable) => variable.value)) || [],
    }), [oficialLanguagesFormatted]);
    const chartOptions = useMemo(() => ({
        title: t("data.languages.graphs.spokenLanguages.title"),
        labels: dataset.labels,
        data: dataset.data,
        icon: React.createElement(TranslateIcon, { className: styles.donutChartIcon }),
    }), [dataset]);
    return React.createElement(DonutChart, Object.assign({}, chartOptions));
};
//# sourceMappingURL=index.js.map