'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React, { Fragment, isValidElement } from 'react';
import { ChevronIcon } from '../../icons/Chevron/index.js';
import { EditIcon } from '../../icons/Edit/index.js';
import { LinkIcon } from '../../icons/Link/index.js';
import { PlusIcon } from '../../icons/Plus/index.js';
import { SwapIcon } from '../../icons/Swap/index.js';
import { XIcon } from '../../icons/X/index.js';
import { Link } from '../Link/index.js';
import { Popup } from '../Popup/index.js';
import './index.scss';
import { Tooltip } from '../Tooltip/index.js';
const icons = {
    chevron: ChevronIcon,
    edit: EditIcon,
    link: LinkIcon,
    plus: PlusIcon,
    swap: SwapIcon,
    x: XIcon
};
const baseClass = 'btn';
export const ButtonContents = ({ children, icon, showTooltip, tooltip })=>{
    const BuiltInIcon = icons[icon];
    return /*#__PURE__*/ _jsxDEV(Fragment, {
        children: [
            tooltip && /*#__PURE__*/ _jsxDEV(Tooltip, {
                className: `${baseClass}__tooltip`,
                show: showTooltip,
                children: tooltip
            }, void 0, false, {
                fileName: "src/elements/Button/index.tsx",
                lineNumber: 34,
                columnNumber: 9
            }, this),
            /*#__PURE__*/ _jsxDEV("span", {
                className: `${baseClass}__content`,
                children: [
                    children && /*#__PURE__*/ _jsxDEV("span", {
                        className: `${baseClass}__label`,
                        children: children
                    }, void 0, false, {
                        fileName: "src/elements/Button/index.tsx",
                        lineNumber: 39,
                        columnNumber: 22
                    }, this),
                    icon && /*#__PURE__*/ _jsxDEV("span", {
                        className: `${baseClass}__icon`,
                        children: [
                            /*#__PURE__*/ isValidElement(icon) && icon,
                            BuiltInIcon && /*#__PURE__*/ _jsxDEV(BuiltInIcon, {}, void 0, false, {
                                fileName: "src/elements/Button/index.tsx",
                                lineNumber: 43,
                                columnNumber: 29
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/Button/index.tsx",
                        lineNumber: 41,
                        columnNumber: 11
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/Button/index.tsx",
                lineNumber: 38,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/Button/index.tsx",
        lineNumber: 32,
        columnNumber: 5
    }, this);
};
export const Button = (props)=>{
    const { id, type = 'button', 'aria-label': ariaLabel, buttonStyle = 'primary', children, className, disabled, el = 'button', enableSubMenu, extraButtonProps = {}, icon, iconPosition = 'right', iconStyle = 'without-border', margin = true, newTab, onClick, onMouseDown, ref, round, size = 'medium', SubMenuPopupContent, to, tooltip, url } = props;
    const [showTooltip, setShowTooltip] = React.useState(false);
    const classes = [
        baseClass,
        className && className,
        icon && `${baseClass}--icon`,
        iconStyle && `${baseClass}--icon-style-${iconStyle}`,
        icon && !children && `${baseClass}--icon-only`,
        size && `${baseClass}--size-${size}`,
        icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,
        tooltip && `${baseClass}--has-tooltip`,
        !SubMenuPopupContent && `${baseClass}--withoutPopup`,
        !margin && `${baseClass}--no-margin`
    ].filter(Boolean).join(' ');
    function handleClick(event) {
        setShowTooltip(false);
        if (type !== 'submit' && onClick) {
            event.preventDefault();
        }
        if (onClick) {
            onClick(event);
        }
    }
    const styleClasses = [
        buttonStyle && `${baseClass}--style-${buttonStyle}`,
        disabled && `${baseClass}--disabled`,
        round && `${baseClass}--round`,
        SubMenuPopupContent ? `${baseClass}--withPopup` : `${baseClass}--withoutPopup`
    ].filter(Boolean).join(' ');
    const buttonProps = {
        id,
        type,
        'aria-disabled': disabled,
        'aria-label': ariaLabel,
        className: !SubMenuPopupContent ? [
            classes,
            styleClasses
        ].join(' ') : classes,
        disabled,
        onClick: !disabled ? handleClick : undefined,
        onMouseDown: !disabled ? onMouseDown : undefined,
        onPointerEnter: tooltip ? ()=>setShowTooltip(true) : undefined,
        onPointerLeave: tooltip ? ()=>setShowTooltip(false) : undefined,
        rel: newTab ? 'noopener noreferrer' : undefined,
        target: newTab ? '_blank' : undefined,
        title: ariaLabel,
        ...extraButtonProps
    };
    let buttonElement;
    switch(el){
        case 'anchor':
            buttonElement = /*#__PURE__*/ _jsxDEV("a", {
                ...buttonProps,
                href: !disabled ? url : undefined,
                ref: ref,
                children: /*#__PURE__*/ _jsxDEV(ButtonContents, {
                    icon: icon,
                    showTooltip: showTooltip,
                    tooltip: tooltip,
                    children: children
                }, void 0, false, {
                    fileName: "src/elements/Button/index.tsx",
                    lineNumber: 142,
                    columnNumber: 11
                }, this)
            }, void 0, false, {
                fileName: "src/elements/Button/index.tsx",
                lineNumber: 137,
                columnNumber: 9
            }, this);
            break;
        case 'link':
            if (disabled) {
                buttonElement = /*#__PURE__*/ _jsxDEV("div", {
                    ...buttonProps,
                    children: /*#__PURE__*/ _jsxDEV(ButtonContents, {
                        icon: icon,
                        showTooltip: showTooltip,
                        tooltip: tooltip,
                        children: children
                    }, void 0, false, {
                        fileName: "src/elements/Button/index.tsx",
                        lineNumber: 153,
                        columnNumber: 13
                    }, this)
                }, void 0, false, {
                    fileName: "src/elements/Button/index.tsx",
                    lineNumber: 152,
                    columnNumber: 11
                }, this);
            }
            buttonElement = /*#__PURE__*/ _jsxDEV(Link, {
                ...buttonProps,
                href: to || url,
                prefetch: false,
                children: /*#__PURE__*/ _jsxDEV(ButtonContents, {
                    icon: icon,
                    showTooltip: showTooltip,
                    tooltip: tooltip,
                    children: children
                }, void 0, false, {
                    fileName: "src/elements/Button/index.tsx",
                    lineNumber: 162,
                    columnNumber: 11
                }, this)
            }, void 0, false, {
                fileName: "src/elements/Button/index.tsx",
                lineNumber: 161,
                columnNumber: 9
            }, this);
            break;
        default:
            const Tag = el;
            // eslint-disable-line no-case-declarations
            buttonElement = /*#__PURE__*/ _jsxDEV(Tag, {
                ref: ref,
                ...buttonProps,
                children: /*#__PURE__*/ _jsxDEV(ButtonContents, {
                    icon: icon,
                    showTooltip: showTooltip,
                    tooltip: tooltip,
                    children: children
                }, void 0, false, {
                    fileName: "src/elements/Button/index.tsx",
                    lineNumber: 175,
                    columnNumber: 11
                }, this)
            }, void 0, false, {
                fileName: "src/elements/Button/index.tsx",
                lineNumber: 174,
                columnNumber: 9
            }, this);
            break;
    }
    if (SubMenuPopupContent) {
        return /*#__PURE__*/ _jsxDEV("div", {
            className: styleClasses,
            children: [
                buttonElement,
                /*#__PURE__*/ _jsxDEV(Popup, {
                    button: /*#__PURE__*/ _jsxDEV(ChevronIcon, {}, void 0, false, {
                        fileName: "src/elements/Button/index.tsx",
                        lineNumber: 187,
                        columnNumber: 19
                    }, void 0),
                    buttonSize: size,
                    className: disabled && !enableSubMenu ? `${baseClass}--popup-disabled` : '',
                    disabled: disabled && !enableSubMenu,
                    horizontalAlign: "right",
                    id: `${id}-popup`,
                    noBackground: true,
                    render: ({ close })=>SubMenuPopupContent({
                            close: ()=>close()
                        }),
                    size: "large",
                    verticalAlign: "bottom"
                }, void 0, false, {
                    fileName: "src/elements/Button/index.tsx",
                    lineNumber: 186,
                    columnNumber: 9
                }, this)
            ]
        }, void 0, true, {
            fileName: "src/elements/Button/index.tsx",
            lineNumber: 184,
            columnNumber: 7
        }, this);
    }
    return buttonElement;
};

//# sourceMappingURL=index.js.map