"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BasicButton = exports.blockClass = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const Link_1 = require("nice-ui/lib/1-inline/Link");
exports.blockClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.lightTheme.font.ui1.mid,
    fz: '14px',
    cur: 'pointer',
    us: 'none',
    trs: 'background .12s ease-in 0s, opacity .12s ease-in 0s',
    d: 'inline-flex',
    ai: 'center',
    jc: 'center',
    fls: 0,
    bdrad: '3px',
    bg: 'transparent',
    bd: 0,
    mr: 0,
    pd: 0,
    out: 0,
    ov: 'visible',
    '&:hover': {
        bxsh: 'none',
    },
    '&:active': {
        bxsh: 'none',
    },
});
const handleDragStart = (e) => e.preventDefault();
const BasicButton = ({ to, border, fill, size = 24, width = size, height = size, round, title, positive, noOutline, transparent, onClick, children, compact, spacious, radius, className = '', ...rest }) => {
    const theme = (0, nano_theme_1.useTheme)();
    const { isLight } = theme;
    const bgFactor = isLight ? 1 : 1.1;
    const dynamicBlockClass = (0, nano_theme_1.useRule)(({ g }) => ({
        // col: g(0.2),
        // svg: {
        // fill: g(0.5),
        // col: g(0.5),
        // },
        '&:hover': {
            // col: g(0.2),
            bg: g(0, 0.08 * bgFactor),
        },
        '&:active': {
            bg: g(0, 0.16 * bgFactor),
        },
    }));
    const fillBlockClass = (0, nano_theme_1.useRule)(({ g }) => ({
        bg: transparent ? 'transparent' : g(0, 0.04 * bgFactor),
        '&:hover': {
            bg: g(0, 0.08 * bgFactor),
        },
        '&:active': {
            bg: g(0, 0.16 * bgFactor),
        },
    }));
    const borderClass = (0, nano_theme_1.useRule)(({ g }) => ({
        bd: `1px solid ${g(0, 0.16 * bgFactor)}`,
        boxShadow: `0 0 2px ${g(0, 0.04 * bgFactor)}`,
    }));
    const style = {
        height,
    };
    style.width = width;
    if (typeof width !== 'number') {
        if (spacious) {
            style.padding = '8px 16px';
        }
        else {
            style.paddingLeft = compact ? 8 : 16;
            style.paddingRight = compact ? 8 : 16;
        }
    }
    if (round) {
        style.borderRadius = '50%';
    }
    if (noOutline) {
        style.boxShadow = 'none';
    }
    if (radius !== undefined) {
        style.borderRadius = radius;
    }
    return (React.createElement(Link_1.Link, { ...rest, a: !!to, className: className + exports.blockClass + dynamicBlockClass + (border ? borderClass : '') + (fill ? fillBlockClass : ''), style: style, title: title, onClick: to ? undefined : onClick, onDragStart: handleDragStart, to: to, "data-testid": "BasicButton" }, children));
};
exports.BasicButton = BasicButton;
//# sourceMappingURL=index.js.map