"use strict";
// @ts-nocheck
exports.__esModule = true;
exports.Button = exports.cnButton = exports.buttonPropWidthDefault = exports.buttonPropWidth = exports.buttonPropFormDefault = exports.buttonPropForm = exports.buttonPropViewDefault = exports.buttonPropView = exports.buttonPropSizeDefault = exports.buttonPropSize = void 0;
var tslib_1 = require("tslib");
require("./Button.css");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var react_router_dom_1 = require("react-router-dom");
var MixFocus_1 = require("../../mixs/MixFocus/MixFocus");
var bem_1 = require("../../utils/bem");
var borderImageBase64_1 = require("../../utils/borderImageBase64");
var getSizeByMap_1 = require("../../utils/getSizeByMap");
var PropsWithAsAttributes_1 = require("../../utils/types/PropsWithAsAttributes");
var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
var Loader_1 = require("../Loader/Loader");
exports.buttonPropSize = ['m', 'xs', 's', 'l', 'xl', '3xxl'];
exports.buttonPropSizeDefault = exports.buttonPropSize[0];
exports.buttonPropView = [
    'primary',
    'secondary',
    'outlined',
    'black',
    'ghost',
    'transparent',
    'link-secondary',
    'link-primary',
];
exports.buttonPropViewDefault = exports.buttonPropView[0];
exports.buttonPropForm = ['default', 'circle'];
exports.buttonPropFormDefault = exports.buttonPropForm[0];
exports.buttonPropWidth = ['default', 'full'];
exports.buttonPropWidthDefault = exports.buttonPropWidth[0];
exports.cnButton = (0, bem_1.cn)('Button');
var sizeMap = {
    xs: 'xs',
    s: 'xs',
    m: 'm',
    l: 'm'
};
var sizeMapOnlyIcon = {
    xs: 'xs',
    s: 's',
    m: 'm',
    l: 'm'
};
exports.Button = (0, PropsWithAsAttributes_1.forwardRefWithAs)(function (props, ref) {
    var _a, _b, _c;
    var _d = (0, usePropsHandler_1.usePropsHandler)((0, exports.cnButton)(), props), _e = _d.size, size = _e === void 0 ? exports.buttonPropSizeDefault : _e, _f = _d.view, view = _f === void 0 ? exports.buttonPropViewDefault : _f, _g = _d.width, width = _g === void 0 ? exports.buttonPropWidthDefault : _g, iconLeft = _d.iconLeft, color = _d.color, form = _d.form, iconRight = _d.iconRight, icon = _d.icon, label = _d.label, className = _d.className, onClick = _d.onClick, disabled = _d.disabled, loading = _d.loading, tabIndex = _d.tabIndex, _h = _d.as, as = _h === void 0 ? 'button' : _h, onlyIcon = _d.onlyIcon, iconSizeProp = _d.iconSize, children = _d.children, showOnHover = _d.showOnHover, isLink = _d.isLink, to = _d.to, active = _d.active, inverted = _d.inverted, type = _d.type, align = _d.align, inline = _d.inline, badge = _d.badge, decorBorder = _d.decorBorder, target = _d.target, otherProps = (0, tslib_1.__rest)(_d, ["size", "view", "width", "iconLeft", "color", "form", "iconRight", "icon", "label", "className", "onClick", "disabled", "loading", "tabIndex", "as", "onlyIcon", "iconSize", "children", "showOnHover", "isLink", "to", "active", "inverted", "type", "align", "inline", "badge", "decorBorder", "target"]);
    var Tag = as;
    var IconOnly = (!label || onlyIcon) && (iconLeft || iconRight);
    var IconLeft = iconLeft;
    var IconRight = iconRight;
    var withIcon = !!iconLeft || !!iconRight;
    var title = props.title || (!!IconOnly && label) || undefined;
    var iconSize = IconOnly
        ? (0, getSizeByMap_1.getSizeByMap)(sizeMapOnlyIcon, size, iconSizeProp)
        : (0, getSizeByMap_1.getSizeByMap)(sizeMap, size, iconSizeProp);
    var handleClick = function (e) {
        if (!disabled && !loading && onClick) {
            onClick(e);
        }
    };
    var componentProps = (_a = {
            rel: target === '_blank' ? 'noreferrer noopener' : undefined,
            style: {}
        },
        _a['data-badge-text'] = null,
        _a);
    if (badge) {
        componentProps.style = (_b = {},
            _b['--button-badge-color'] = badge.color,
            _b['--button-badge-inverted'] = badge.inverted ? '#fff' : null,
            _b);
        componentProps['data-badge-text'] = badge.text;
    }
    if (decorBorder) {
        componentProps.style = (_c = {},
            _c['borderImageSource'] = (0, borderImageBase64_1.borderImageBase64)(decorBorder),
            _c);
    }
    var renderBody = function () { return (react_1["default"].createElement(react_1["default"].Fragment, null,
        IconOnly && react_1["default"].createElement(IconOnly, { className: (0, exports.cnButton)('Icon'), size: iconSize }),
        !IconOnly &&
            ((IconLeft || IconRight) && label ? (react_1["default"].createElement(react_1["default"].Fragment, null,
                IconLeft && (react_1["default"].createElement(IconLeft, { className: (0, exports.cnButton)('Icon', { position: 'left' }), size: iconSize })),
                react_1["default"].createElement("span", { className: (0, exports.cnButton)('Label') }, label),
                iconRight && (react_1["default"].createElement(IconRight, { className: (0, exports.cnButton)('Icon', { position: 'right' }), size: iconSize })))) : (react_1["default"].createElement("span", { className: (0, exports.cnButton)('Label') }, label !== null && label !== void 0 ? label : children))),
        !!icon && react_1["default"].createElement("span", { className: (0, exports.cnButton)('Icon', { position: 'right' }) }, icon),
        loading && react_1["default"].createElement(Loader_1.Loader, { className: (0, exports.cnButton)('Loader'), size: "s" }))); };
    if (isLink) {
        return (react_1["default"].createElement(react_router_dom_1.NavLink, (0, tslib_1.__assign)({}, otherProps, componentProps, { className: (0, exports.cnButton)({
                align: align,
                size: size,
                view: view,
                width: width,
                form: form,
                disabled: disabled,
                loading: loading,
                withIcon: withIcon,
                color: color,
                showOnHover: showOnHover,
                onlyIcon: !!IconOnly,
                inverted: inverted,
                inline: inline,
                decorBorder: !!decorBorder,
                active: !!active,
                badge: !!badge
            }, [(0, MixFocus_1.cnMixFocus)(), className]), tabIndex: tabIndex, title: title, to: to, ref: ref }, (Tag === 'button' ? { disabled: disabled || loading } : {})), renderBody()));
    }
    return (react_1["default"].createElement(Tag, (0, tslib_1.__assign)({}, otherProps, componentProps, { onClick: onClick ? handleClick : undefined, className: (0, exports.cnButton)({
            align: align,
            size: size,
            view: view,
            width: width,
            form: form,
            disabled: disabled,
            loading: loading,
            withIcon: withIcon,
            color: color,
            showOnHover: showOnHover,
            onlyIcon: !!IconOnly,
            inverted: inverted,
            active: active,
            inline: inline,
            badge: !!badge,
            decorBorder: !!decorBorder
        }, [(0, MixFocus_1.cnMixFocus)(), className]), tabIndex: tabIndex, title: title, ref: ref, target: target }, (Tag === 'button' ? { disabled: disabled || loading } : {}), (Tag === 'button' ? { type: type || 'button' } : {})), renderBody()));
});
