// @ts-nocheck
import { __assign, __rest } from "tslib";
import './Button.css';
import React from 'react';
import { NavLink } from 'react-router-dom';
import { cnMixFocus } from '../../mixs/MixFocus/MixFocus';
import { cn } from '../../utils/bem';
import { borderImageBase64 } from '../../utils/borderImageBase64';
import { getSizeByMap } from '../../utils/getSizeByMap';
import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
import { Loader } from '../Loader/Loader';
export var buttonPropSize = ['m', 'xs', 's', 'l', 'xl', '3xxl'];
export var buttonPropSizeDefault = buttonPropSize[0];
export var buttonPropView = [
    'primary',
    'secondary',
    'outlined',
    'black',
    'ghost',
    'transparent',
    'link-secondary',
    'link-primary',
    'borderY'
];
export var buttonPropViewDefault = buttonPropView[0];
export var buttonPropForm = ['default', 'circle'];
export var buttonPropFormDefault = buttonPropForm[0];
export var buttonPropWidth = ['default', 'full'];
export var buttonPropWidthDefault = buttonPropWidth[0];
export var cnButton = cn('Button');
var sizeMap = {
    xs: 'xs',
    s: 'xs',
    m: 'm',
    l: 'm'
};
var sizeMapOnlyIcon = {
    xs: 'xs',
    s: 's',
    m: 'm',
    l: 'm'
};
export var Button = forwardRefWithAs(function (props, ref) {
    var _a, _b, _c;
    var _d = usePropsHandler(cnButton(), props), _e = _d.size, size = _e === void 0 ? buttonPropSizeDefault : _e, _f = _d.view, view = _f === void 0 ? buttonPropViewDefault : _f, _g = _d.width, width = _g === void 0 ? 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 = __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
        ? getSizeByMap(sizeMapOnlyIcon, size, iconSizeProp)
        : 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'] = borderImageBase64(decorBorder),
            _c);
    }
    var renderBody = function () { return (React.createElement(React.Fragment, null,
        IconOnly && React.createElement(IconOnly, { className: cnButton('Icon'), size: iconSize }),
        !IconOnly &&
            ((IconLeft || IconRight) && label ? (React.createElement(React.Fragment, null,
                IconLeft && (React.createElement(IconLeft, { className: cnButton('Icon', { position: 'left' }), size: iconSize })),
                React.createElement("span", { className: cnButton('Label') }, label),
                iconRight && (React.createElement(IconRight, { className: cnButton('Icon', { position: 'right' }), size: iconSize })))) : (React.createElement("span", { className: cnButton('Label') }, label !== null && label !== void 0 ? label : children))),
        !!icon && React.createElement("span", { className: cnButton('Icon', { position: 'right' }) }, icon),
        loading && React.createElement(Loader, { className: cnButton('Loader'), size: "s" }))); };
    if (isLink) {
        return (React.createElement(NavLink, __assign({}, otherProps, componentProps, { className: 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
            }, [cnMixFocus(), className]), tabIndex: tabIndex, title: title, to: to, ref: ref }, (Tag === 'button' ? { disabled: disabled || loading } : {})), renderBody()));
    }
    return (React.createElement(Tag, __assign({}, otherProps, componentProps, { onClick: onClick ? handleClick : undefined, className: 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
        }, [cnMixFocus(), className]), tabIndex: tabIndex, title: title, ref: ref, target: target }, (Tag === 'button' ? { disabled: disabled || loading } : {}), (Tag === 'button' ? { type: type || 'button' } : {})), renderBody()));
});
