import React, { useMemo } from "react";
import { useRootElement } from "../context";
import * as styles from "./styles";
import { Text } from "~/components/deprecated/components/Text";
export const BarChart = () => {
    const { title, labels, data, unit } = useRootElement();
    const maxUnit = useMemo(() => {
        if (!data)
            return undefined;
        return [...data].sort((a, b) => a - b).reverse()[0];
    }, [data]);
    const chartUnit = useMemo(() => {
        if (!unit || !maxUnit) {
            return 100;
        }
        return Math.ceil(maxUnit / 10) * 10;
    }, [maxUnit, unit]);
    const barList = useMemo(() => data.map((value, index) => ({
        label: labels[index],
        value,
        width: Math.round((value * 100) / chartUnit),
    })), [chartUnit, data, labels]);
    return (React.createElement("div", { className: styles.container },
        React.createElement("div", { className: styles.header },
            React.createElement(Text, { variant: "p", noMargin: true, weight: "--ll-font-weight-bold" }, `${title} (${unit})`)),
        React.createElement("div", { className: styles.body }, barList.map((line) => (React.createElement("div", { key: line.label, className: styles.row },
            line.label !== "0" && (React.createElement(Text, { noMargin: true, variant: "caption2" }, line.label)),
            React.createElement("div", { className: styles.bar },
                React.createElement("div", { className: styles.textContainer, style: {
                        left: `${line.width}%`,
                    } },
                    React.createElement(Text, { noMargin: true, align: "center", color: "--ll-color-on-background", variant: "caption2" },
                        line.value,
                        unit)),
                React.createElement("span", { className: styles.amount, style: {
                        width: `${line.width}%`,
                    } })))))),
        React.createElement("div", { className: styles.footer },
            React.createElement(Text, { noMargin: true, variant: "caption2", color: "--ll-color-on-background" }, "0"),
            React.createElement(Text, { noMargin: true, variant: "caption2", align: "center", color: "--ll-color-on-background" }, `${chartUnit / 2}${unit}`),
            React.createElement(Text, { noMargin: true, variant: "caption2", align: "right", color: "--ll-color-on-background" }, `${chartUnit}${unit}`))));
};
//# sourceMappingURL=index.js.map