"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartOptionsOverlay = exports.CalculateOptionsOverlay = void 0;
const react_1 = __importDefault(require("react"));
const inlines_1 = require("inlines");
const varsUtilities_1 = require("../../varsUtilities");
const components_1 = require("../../components");
const icons_1 = require("../../icons");
const StyledSelectItem = (0, inlines_1.styled)('div', {
    alignItems: 'center',
    cursor: 'pointer',
    display: 'flex',
    gap: 10,
    padding: '8px 12px',
    borderRadius: 8,
    '&:hover': {
        backgroundColor: (0, varsUtilities_1.color)('action', 'primary', 'subtleSelected'),
    },
});
// todo move to different file
const CalculateOptionsOverlay = ({ calculationOption, setCalculationOption, close, }) => {
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            padding: 8,
            backgroundColor: (0, varsUtilities_1.color)('background', 'default', 'surface'),
            width: 210,
        } },
        react_1.default.createElement(StyledSelectItem, { onClick: () => {
                setCalculationOption('numbers');
                close();
            }, style: {
                marginBottom: 6,
                backgroundColor: calculationOption === 'numbers'
                    ? (0, varsUtilities_1.color)('action', 'primary', 'subtleSelected')
                    : '',
            } },
            react_1.default.createElement(icons_1.IconCheckLarge, { style: {
                    opacity: calculationOption === 'numbers' ? 1 : 0,
                } }),
            react_1.default.createElement(icons_1.IconHash, null),
            react_1.default.createElement(components_1.Text, { weight: "medium" }, "Total count")),
        react_1.default.createElement(StyledSelectItem, { onClick: () => {
                setCalculationOption('percentage');
                close();
            }, style: {
                backgroundColor: calculationOption === 'percentage'
                    ? (0, varsUtilities_1.color)('action', 'primary', 'subtleSelected')
                    : '',
            } },
            react_1.default.createElement(icons_1.IconCheckLarge, { style: { opacity: calculationOption === 'percentage' ? 1 : 0 } }),
            react_1.default.createElement(icons_1.IconPercentage, null),
            react_1.default.createElement(components_1.Text, { weight: "medium" }, "Percentage"))));
};
exports.CalculateOptionsOverlay = CalculateOptionsOverlay;
const ChartOptionsOverlay = ({ chartOption, setChartOption, close }) => {
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            padding: 8,
            backgroundColor: (0, varsUtilities_1.color)('background', 'default', 'surface'),
            width: 210,
        } },
        react_1.default.createElement(StyledSelectItem, { onClick: () => {
                setChartOption('bar');
                close();
            }, style: {
                marginBottom: 6,
                backgroundColor: chartOption === 'bar'
                    ? (0, varsUtilities_1.color)('action', 'primary', 'subtleSelected')
                    : '',
            } },
            react_1.default.createElement(icons_1.IconCheckLarge, { style: {
                    opacity: chartOption === 'bar' ? 1 : 0,
                } }),
            react_1.default.createElement(icons_1.IconChartBarHorizontal, null),
            react_1.default.createElement(components_1.Text, { weight: "medium" }, "Bar")),
        react_1.default.createElement(StyledSelectItem, { onClick: () => {
                setChartOption('line');
                close();
            }, style: {
                marginBottom: 6,
                backgroundColor: chartOption === 'line'
                    ? (0, varsUtilities_1.color)('action', 'primary', 'subtleSelected')
                    : '',
            } },
            react_1.default.createElement(icons_1.IconCheckLarge, { style: { opacity: chartOption === 'line' ? 1 : 0 } }),
            react_1.default.createElement(icons_1.IconChartLine, null),
            react_1.default.createElement(components_1.Text, { weight: "medium" }, "Line")),
        react_1.default.createElement(StyledSelectItem, { onClick: () => {
                setChartOption('pie');
                close();
            }, style: {
                backgroundColor: chartOption === 'pie'
                    ? (0, varsUtilities_1.color)('action', 'primary', 'subtleSelected')
                    : '',
            } },
            react_1.default.createElement(icons_1.IconCheckLarge, { style: { opacity: chartOption === 'pie' ? 1 : 0 } }),
            react_1.default.createElement(icons_1.IconChartPie, null),
            react_1.default.createElement(components_1.Text, { weight: "medium" }, "Pie"))));
};
exports.ChartOptionsOverlay = ChartOptionsOverlay;
//# sourceMappingURL=overlays.js.map