import React, { forwardRef } from "react";
import cls from "classnames";
import { GRADIENT_TEXT_CLASS } from "../../utils/constants";
import { convertRoundnessMatrix } from "../../utils/roundness";
import { base as viewCSS } from "./variations/_view/base";
import { base as sizeCSS } from "./variations/_size/base";
import { base as disabledCSS } from "./variations/_disabled/base";
import { base as focusedCSS } from "./variations/_focused/base";
import { base as stretchingCSS } from "./variations/_stretching/base";
import { base as blurredCSS } from "./variations/_blurred/base";
import { base, ButtonText, ButtonValue, Loader, LoadWrap, StyledAdditionalContent, StyledContentLeft, StyledContentRight, StyledSpinner } from "./Button.styles";
import { classes, tokens } from "./Button.tokens";
export const buttonRoot = (Root)=>/*#__PURE__*/ forwardRef((props, ref)=>{
        const { children, view, size, text, value, contentLeft, contentRight, contentPlacing = 'default', isLoading, loader, stretch, square, pin, disabled, focused, outlined, className, blur, style, stretching = 'auto', additionalContent, ...rest } = props;
        const txt = typeof children === 'string' ? children : text;
        const hasRightContentMargin = Boolean(children || txt || value || contentRight);
        const hasLeftContentMargin = Boolean(contentLeft ? contentLeft && (txt || value) : txt || value);
        const stretchingClass = stretch ? classes.filledStretching : classes[`${stretching}Stretching`];
        const contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
        const squareClass = square ? classes.buttonSquare : undefined;
        const isLoadingClass = isLoading ? classes.buttonLoading : undefined;
        const buttonBorderRadius = pin ? convertRoundnessMatrix(pin, `var(${tokens.buttonRadius})`, `var(${tokens.buttonHeight})`) : `var(${tokens.buttonRadius}, calc(var(${tokens.buttonHeight}) / 4))`;
        const contentPlacingMapper = {
            default: 'center',
            relaxed: 'space-between'
        };
        const contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';
        return /*#__PURE__*/ React.createElement(Root, {
            type: "button",
            ref: ref,
            view: view,
            size: size,
            value: value,
            disabled: disabled,
            focused: focused || outlined,
            tabIndex: disabled ? -1 : 0,
            className: cls(squareClass, stretchingClass, classes.buttonItem, isLoadingClass, className),
            style: {
                ...style,
                '--plasma_computed-btn-br': buttonBorderRadius,
                '--plasma_private-blur': blur
            },
            ...rest
        }, /*#__PURE__*/ React.createElement(LoadWrap, {
            contentPlacing: contentPlacementValue,
            isLoading: isLoading
        }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, {
            hasContentMargin: hasRightContentMargin
        }, contentLeft), txt ? /*#__PURE__*/ React.createElement(ButtonText, {
            className: cls(!additionalContent ? contentRelaxedClass : '', GRADIENT_TEXT_CLASS)
        }, txt) : children, additionalContent && /*#__PURE__*/ React.createElement(StyledAdditionalContent, {
            className: cls(contentRelaxedClass, {
                [classes.buttonHasValue]: Boolean(value)
            })
        }, additionalContent), value && /*#__PURE__*/ React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, {
            hasContentMargin: hasLeftContentMargin
        }, contentRight)), isLoading && /*#__PURE__*/ React.createElement(Loader, null, loader || /*#__PURE__*/ React.createElement(StyledSpinner, null)));
    });
export const buttonConfig = {
    name: 'Button',
    tag: 'button',
    layout: buttonRoot,
    base,
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        },
        disabled: {
            css: disabledCSS,
            attrs: true
        },
        focused: {
            css: focusedCSS
        },
        blurred: {
            css: blurredCSS
        },
        stretching: {
            css: stretchingCSS
        }
    },
    defaults: {
        view: 'secondary',
        size: 'm',
        stretching: 'auto'
    }
};
