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