'use client';
import React, { Fragment, forwardRef, isValidElement } from 'react';
import { Chevron } from '../../icons/Chevron/index.js';
import { Edit } from '../../icons/Edit/index.js';
import { LinkIcon } from '../../icons/Link/index.js';
import { Plus } from '../../icons/Plus/index.js';
import { Swap } from '../../icons/Swap/index.js';
import { X } from '../../icons/X/index.js';
import { Tooltip } from '../Tooltip/index.js';
const icons = {
    chevron: Chevron,
    edit: Edit,
    link: LinkIcon,
    plus: Plus,
    swap: Swap,
    x: X
};
const baseClass = 'btn';
export const ButtonContents = ({ children, icon, showTooltip, tooltip })=>{
    const BuiltInIcon = icons[icon];
    return /*#__PURE__*/ React.createElement(Fragment, null, tooltip && /*#__PURE__*/ React.createElement(Tooltip, {
        className: `${baseClass}__tooltip`,
        show: showTooltip
    }, tooltip), /*#__PURE__*/ React.createElement("span", {
        className: `${baseClass}__content`
    }, children && /*#__PURE__*/ React.createElement("span", {
        className: `${baseClass}__label`
    }, children), icon && /*#__PURE__*/ React.createElement("span", {
        className: `${baseClass}__icon`
    }, /*#__PURE__*/ isValidElement(icon) && icon, BuiltInIcon && /*#__PURE__*/ React.createElement(BuiltInIcon, null))));
};
export const Button = /*#__PURE__*/ forwardRef((props, ref)=>{
    const { id, type = 'button', Link, 'aria-label': ariaLabel, buttonStyle = 'primary', children, className, disabled, el = 'button', icon, iconPosition = 'right', iconStyle = 'without-border', newTab, onClick, round, size = 'medium', to, tooltip, url } = props;
    const [showTooltip, setShowTooltip] = React.useState(false);
    const classes = [
        baseClass,
        className && className,
        buttonStyle && `${baseClass}--style-${buttonStyle}`,
        icon && `${baseClass}--icon`,
        iconStyle && `${baseClass}--icon-style-${iconStyle}`,
        icon && !children && `${baseClass}--icon-only`,
        disabled && `${baseClass}--disabled`,
        round && `${baseClass}--round`,
        size && `${baseClass}--size-${size}`,
        iconPosition && `${baseClass}--icon-position-${iconPosition}`,
        tooltip && `${baseClass}--has-tooltip`
    ].filter(Boolean).join(' ');
    function handleClick(event) {
        setShowTooltip(false);
        if (type !== 'submit' && onClick) event.preventDefault();
        if (onClick) onClick(event);
    }
    const buttonProps = {
        id,
        type,
        'aria-disabled': disabled,
        'aria-label': ariaLabel,
        className: classes,
        disabled,
        onClick: !disabled ? handleClick : undefined,
        onMouseEnter: tooltip ? ()=>setShowTooltip(true) : undefined,
        onMouseLeave: tooltip ? ()=>setShowTooltip(false) : undefined,
        rel: newTab ? 'noopener noreferrer' : undefined,
        target: newTab ? '_blank' : undefined
    };
    switch(el){
        case 'link':
            if (!Link) {
                console.error('Link is required when using el="link"', children);
                return null;
            }
            return /*#__PURE__*/ React.createElement(Link, {
                ...buttonProps,
                href: to || url,
                to: to || url
            }, /*#__PURE__*/ React.createElement(ButtonContents, {
                icon: icon,
                showTooltip: showTooltip,
                tooltip: tooltip
            }, children));
        case 'anchor':
            return /*#__PURE__*/ React.createElement("a", {
                ...buttonProps,
                href: url,
                ref: ref
            }, /*#__PURE__*/ React.createElement(ButtonContents, {
                icon: icon,
                showTooltip: showTooltip,
                tooltip: tooltip
            }, children));
        default:
            const Tag = el // eslint-disable-line no-case-declarations
            ;
            return /*#__PURE__*/ React.createElement(Tag, {
                ref: ref,
                type: "submit",
                ...buttonProps
            }, /*#__PURE__*/ React.createElement(ButtonContents, {
                icon: icon,
                showTooltip: showTooltip,
                tooltip: tooltip
            }, children));
    }
});

//# sourceMappingURL=index.js.map