import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useNeighborhoodDemographics } from "~/sdks/NeighborhoodDemographics/context";
import { Chart } from "~/components/deprecated";
export const MotherTongue = () => {
    const { t } = useTranslation("neighborhoodDemographics");
    const { demographicsData: { mother_tongue: motherTongue }, } = useNeighborhoodDemographics();
    // The reason for the code below is because at the moment we only want to display the first 10 languages.
    // This is because displaying more than 10 languages at a time doesnt fit and ChartJS end up hiding some of the values.
    // french_and non_official_language_s and english_and_non_official_language_s' are too long to be displayed on mobile
    // So they are being filtered out.
    const motherTongueFormatted = useMemo(() => {
        var _a;
        return (_a = motherTongue === null || motherTongue === void 0 ? void 0 : motherTongue.variables.filter((item) => item.variable !== "french_and_non_official_language_s" &&
            item.variable !== "english_and_non_official_language_s").slice(0, 10)) === null || _a === void 0 ? void 0 : _a.map((variable) => (Object.assign(Object.assign({}, variable), { value: Number((variable.value * 100).toFixed(1)) }))).filter((variable) => (!variable.type || variable.type === "percent") &&
            variable.value > 0);
    }, [motherTongue === null || motherTongue === void 0 ? void 0 : motherTongue.variables]);
    const dataset = useMemo(() => ({
        labels: (motherTongueFormatted === null || motherTongueFormatted === void 0 ? void 0 : motherTongueFormatted.map((variable) => variable.label)) ||
            [],
        data: (motherTongueFormatted === null || motherTongueFormatted === void 0 ? void 0 : motherTongueFormatted.map((variable) => variable.value)) ||
            [],
    }), [motherTongueFormatted]);
    const chartOptions = useMemo(() => ({
        title: t("data.languages.graphs.motherTongue.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