import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import * as styles from "../../styles";
import { useDemographics } from "~/sdks/LocalDemographics/context";
import { DemographicsTextCard } from "~/components/DemographicsTextCard";
export const AverageIncome = () => {
    const { t } = useTranslation("localDemographics");
    const { country, demographicsState: { income }, } = useDemographics();
    const incomeTypes = useMemo(() => {
        var _a, _b, _c, _d;
        return (income === null || income === void 0 ? void 0 : income.variables.slice().reverse()) || [
            {
                variable: "avg_individual_income",
                label: "Avg individual income",
                value: ((_b = (_a = income === null || income === void 0 ? void 0 : income.variables) === null || _a === void 0 ? void 0 : _a.find((x) => x.variable === "inc_person")) === null || _b === void 0 ? void 0 : _b.value) || 0.0,
            },
            {
                variable: "avg_household_income",
                label: "Avg household income",
                value: ((_d = (_c = income === null || income === void 0 ? void 0 : income.variables) === null || _c === void 0 ? void 0 : _c.find((x) => x.variable === "inc_home")) === null || _d === void 0 ? void 0 : _d.value) ||
                    0.0,
            },
        ];
    }, [income === null || income === void 0 ? void 0 : income.variables]);
    /**
     * Intl.NumberFormat does a good job at displaying currency.
     *
     * We USD for the currency so that it formats to have a $ at the start of the amount.
     * If we put CAD, it will output as CAD$
     */
    const chartOptions = useMemo(() => ({
        options: {
            title: t("data.income.graphs.averageIncome.title", {
                context: country,
            }),
            values: incomeTypes.map((incomeType) => {
                let label = "";
                if (incomeType.variable === "avg_household_income") {
                    label = t("data.income.graphs.averageIncome.types.avgHouseholdIncome", { context: country });
                }
                if (incomeType.variable === "avg_individual_income") {
                    label = t("data.income.graphs.averageIncome.types.avgIndividualIncome", { context: country });
                }
                return {
                    variable: incomeType.variable,
                    value: `${new Intl.NumberFormat("en-EN", {
                        style: "currency",
                        currency: "USD",
                        maximumFractionDigits: 1,
                    }).format(incomeType.value / 1000)}${incomeType.value >= 1000 ? "k" : ""}`,
                    label,
                };
            }),
        },
    }), [incomeTypes]);
    return (React.createElement("div", { className: styles.cardContainer },
        React.createElement(DemographicsTextCard, Object.assign({}, chartOptions))));
};
//# sourceMappingURL=index.js.map