"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SegmentedControl = void 0;
const react_1 = __importDefault(require("react"));
const inlines_1 = require("inlines");
const Text_1 = require("../Text");
const varsUtilities_1 = require("../../varsUtilities");
const hooks_1 = require("../../hooks");
const StyledSegmentOption = (0, inlines_1.styled)('div', {
    alignItems: 'center',
    borderRadius: 4,
    display: 'flex',
    padding: '4px 12px',
    cursor: 'pointer',
    '&:focus': {
        backgroundColor: (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive'),
    },
});
const SegmentedControl = ({ data = [], onChange, style, active = 0,
// iundex
 }) => {
    const [activeOption, setActiveOption] = (0, hooks_1.usePropState)(active >= data.length ? data.length - 1 : active < 0 ? 0 : active);
    const calc = (100 / data.length) * activeOption;
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            flexShrink: 0,
            position: 'relative',
            alignItems: 'center',
            backgroundColor: (0, varsUtilities_1.color)('action', 'neutral', 'subtleNormal'),
            borderRadius: 8,
            display: 'grid',
            gridTemplateColumns: `repeat(${data.length}, 1fr)`,
            // gridTemplateColumns: `repeat(${data.length}, minmax(40px, 1fr))`,
            gridColumnGap: '4px',
            padding: 4,
            minWidth: 'fit-content',
            ...style,
        } },
        react_1.default.createElement(inlines_1.styled.div, { style: {
                top: 4,
                bottom: 4,
                right: 0,
                left: `${calc}%`,
                transition: 'all 0.2s',
                width: `calc(100% / ${data.length} - 8px)`,
                marginLeft: '4px',
                marginRight: '4px',
                position: 'absolute',
                // maxWidth: '25%',
                backgroundColor: (0, varsUtilities_1.color)('standalone', 'foreground', 'default'),
                borderRadius: 4,
                cursor: 'default',
            } }),
        data?.map((item, idx) => (react_1.default.createElement(StyledSegmentOption, { key: idx, onClick: () => {
                setActiveOption(idx);
                onChange && onChange(idx);
            }, style: {
                transform: 'translate3d(0px,0px,0px)',
                whiteSpace: 'nowrap',
                boxShadow: activeOption === idx
                    ? '0px 2px 8px -1px rgba(27, 36, 44, 0.08), 0px 2px 2px -1px rgba(27, 36, 44, 0.04)'
                    : 'none',
                '&:hover': {
                    backgroundColor: activeOption !== idx &&
                        (0, varsUtilities_1.color)('action', 'neutral', 'subtleHover'),
                },
            } },
            react_1.default.createElement(Text_1.Text, { align: "center", selectable: "none", size: 14, weight: "medium", style: {
                    transition: 'color 0.25s',
                    color: activeOption === idx ? '#1b242c' : 'inherit',
                    width: '100%',
                } }, item))))));
};
exports.SegmentedControl = SegmentedControl;
//# sourceMappingURL=index.js.map