"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MetricsWidget = void 0;
const react_1 = __importStar(require("react"));
const inlines_1 = require("inlines");
const varsUtilities_1 = require("../../varsUtilities");
const overlays_1 = require("./overlays");
const components_1 = require("../../components");
const icons_1 = require("../../icons");
// TODO find a way to pass Chart Specific props // ??
// pass select options  ??
const MetricsWidget = ({ calcOption, chart, data, height = 296, style, }) => {
    const [selected, setSelected] = (0, react_1.useState)('');
    const [chartOption, setChartOption] = (0, react_1.useState)(chart);
    const [calculationOption, setCalculationOption] = (0, react_1.useState)(calcOption);
    // const changeChartTooltip = useTooltip('Change chart type', 'top')
    // const changeCalculation = useTooltip('Change calculation', 'top')
    const selectOptions = Object.keys(data).map((item, idx) => ({
        label: item,
        value: item,
    }));
    if (!selected) {
        setSelected(selectOptions[0]?.value);
    }
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            backgroundColor: (0, varsUtilities_1.color)('background', 'default', 'strong'),
            border: `1px solid ${(0, varsUtilities_1.color)('border', 'default', 'strong')}`,
            borderRadius: 8,
            width: 588,
            height: 430,
            ...style,
        } },
        react_1.default.createElement(inlines_1.styled.div, { style: {
                display: 'flex',
                alignItems: 'center',
                borderBottom: `1px solid ${(0, varsUtilities_1.color)('border', 'default', 'strong')}`,
                justifyContent: 'space-between',
                padding: '16px 16px 16px 20px',
            } },
            react_1.default.createElement(components_1.Text, { weight: "strong", size: 16, transform: "capitalize" }, selected),
            react_1.default.createElement(inlines_1.styled.div, { style: { display: 'flex', alignItems: 'center', gap: 12 } },
                react_1.default.createElement(inlines_1.styled.div, { style: {
                        width: 1,
                        height: 28,
                        backgroundColor: (0, varsUtilities_1.color)('border', 'default', 'strong'),
                    } }),
                react_1.default.createElement(components_1.Popover.Root, null,
                    react_1.default.createElement(components_1.Popover.Trigger, null,
                        react_1.default.createElement(components_1.Button, { icon: calculationOption === 'numbers' ? (react_1.default.createElement(icons_1.IconHash, null)) : (react_1.default.createElement(icons_1.IconPercentage, null)), size: "small", color: "system", light: true, style: {
                                border: '0px solid transparent',
                                '&:focus': {
                                    boxShadow: 'none',
                                },
                            } })),
                    react_1.default.createElement(components_1.Popover.Content, { side: "bottom", sideOffset: 6, style: { padding: 0 } }, ({ close }) => (react_1.default.createElement(overlays_1.CalculateOptionsOverlay, { calculationOption: calculationOption, setCalculationOption: setCalculationOption, close: close })))),
                react_1.default.createElement(components_1.Popover.Root, null,
                    react_1.default.createElement(components_1.Popover.Trigger, null,
                        react_1.default.createElement(components_1.Button, { icon: chartOption === 'bar' ? (react_1.default.createElement(icons_1.IconChartBarHorizontal, null)) : chartOption === 'line' ? (react_1.default.createElement(icons_1.IconChartLine, null)) : chartOption === 'pie' ? (react_1.default.createElement(icons_1.IconChartPie, null)) : (react_1.default.createElement(icons_1.IconChartBarHorizontal, null)), size: "small", color: "system", light: true, style: {
                                border: '0px solid transparent',
                                '&:focus': {
                                    boxShadow: 'none',
                                },
                            } })),
                    react_1.default.createElement(components_1.Popover.Content, { side: "bottom", sideOffset: 6, style: { padding: 0 } }, ({ close }) => (react_1.default.createElement(overlays_1.ChartOptionsOverlay, { chartOption: chartOption, setChartOption: setChartOption, close: close })))))),
        react_1.default.createElement(inlines_1.styled.div, { style: {
                position: 'relative',
                height: height,
                padding: '16px 16px 16px 20px',
            } },
            chartOption === 'bar' && (react_1.default.createElement(components_1.BarGraph, { data: data[selected], 
                // @ts-ignore
                valueFormat: calculationOption === 'numbers' ? 'number-human' : 'percentages' })),
            chartOption === 'line' && react_1.default.createElement(components_1.LineGraph, { data: data[selected] }),
            chartOption === 'pie' && (react_1.default.createElement(components_1.PieGraph, { data: data[selected], valueFormat: calculationOption === 'numbers' ? 'number-human' : 'percentages' })))));
};
exports.MetricsWidget = MetricsWidget;
//# sourceMappingURL=index.js.map