"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuItem = void 0;
const react_1 = __importDefault(require("react"));
const varsUtilities_1 = require("../../varsUtilities");
const inlines_1 = require("inlines");
const Text_1 = require("../Text");
const breakpoints_1 = require("../../utils/breakpoints");
const MenuItem = ({ active, onClick, onChange, shrink, style, value, icon, label, }) => {
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(inlines_1.styled.div, { onClick: (e) => {
                if (onChange) {
                    // console.log('clikie 🍔', value)
                    onChange(value);
                    onClick();
                }
            }, style: {
                cursor: 'pointer',
                position: 'relative',
                padding: '8px 12px',
                marginBottom: '8px',
                boxSizing: 'content-box',
                transition: '0.5s width',
                width: !shrink ? 'calc(100% - 24px)' : '20px',
                height: '24px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'flex-start',
                overflow: 'hidden',
                borderRadius: 8,
                backgroundColor: active
                    ? (0, varsUtilities_1.color)('action', 'primary', 'subtleSelected')
                    : null,
                '@media (hover: hover)': {
                    '&:hover': !active
                        ? {
                            backgroundColor: (0, varsUtilities_1.color)('action', 'system', 'subtleHover'),
                            //   color: `${color('text')} !important`,
                        }
                        : null,
                },
                [breakpoints_1.BpTablet]: {
                    '&:hover': {
                        backgroundColor: active
                            ? (0, varsUtilities_1.color)('action', 'primary', 'subtleSelected')
                            : 'transparent',
                    },
                },
                '&:active': !active
                    ? {
                        backgroundColor: (0, varsUtilities_1.color)('action', 'system', 'subtleActive'),
                    }
                    : null,
            } },
            react_1.default.createElement(Text_1.Text, { selectable: "none", color: active ? 'brand' : 'default', weight: active ? 'strong' : 'medium', 
                //   wrap
                style: {
                    gap: !shrink ? 10 : 0,
                    display: 'flex',
                    alignItems: 'center',
                    cursor: 'pointer',
                    ...style,
                } },
                icon ? (react_1.default.createElement(inlines_1.styled.div, { style: { marginLeft: 0 } }, icon)) : null,
                !icon && shrink && typeof label === 'string' ? (react_1.default.createElement(react_1.default.Fragment, null, label.split('').splice(0, 2))) : null,
                !shrink && label))));
};
exports.MenuItem = MenuItem;
//# sourceMappingURL=MenuItem.js.map