"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.buttonSizePx = exports.ButtonSize = exports.ButtonLevel = void 0;
const React = require("react");
const styled = require('styled-components').default;
const { space } = require('styled-system');
var ButtonLevel;
(function (ButtonLevel) {
    ButtonLevel["Primary"] = "primary";
    ButtonLevel["Secondary"] = "secondary";
    ButtonLevel["Tertiary"] = "tertiary";
    ButtonLevel["SidebarSecondary"] = "sidebarSecondary";
    ButtonLevel["Recommended"] = "recommended";
})(ButtonLevel || (exports.ButtonLevel = ButtonLevel = {}));
var ButtonSize;
(function (ButtonSize) {
    ButtonSize[ButtonSize["Small"] = 1] = "Small";
    ButtonSize[ButtonSize["Normal"] = 2] = "Normal";
})(ButtonSize || (exports.ButtonSize = ButtonSize = {}));
const StyledTitle = styled.span `

`;
const buttonSizePx = (props) => {
    const buttonSize = typeof props === 'number' ? props : props.size;
    if (!buttonSize || buttonSize === ButtonSize.Normal)
        return 32;
    if (buttonSize === ButtonSize.Small)
        return 26;
    throw new Error(`Unknown size: ${buttonSize}`);
};
exports.buttonSizePx = buttonSizePx;
const isSquare = (props) => {
    return props.iconOnly || props.isSquare;
};
const StyledButtonBase = styled.button `
	display: flex;
	align-items: center;
	flex-direction: row;
	height: ${(props) => (0, exports.buttonSizePx)(props)}px;
	min-height: ${(props) => (0, exports.buttonSizePx)(props)}px;
	max-height: ${(props) => (0, exports.buttonSizePx)(props)}px;
	width: ${(props) => isSquare(props) ? `${(0, exports.buttonSizePx)(props)}px` : 'auto'};
	${(props) => isSquare(props) ? `min-width: ${(0, exports.buttonSizePx)(props)}px;` : ''}
	${(props) => !isSquare(props) ? 'min-width: 100px;' : ''}
	${(props) => isSquare(props) ? `max-width: ${(0, exports.buttonSizePx)(props)}px;` : ''}
	box-sizing: border-box;
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
	padding: 0 ${(props) => isSquare(props) ? 4 : 14}px;
	justify-content: center;
	opacity: ${(props) => props.disabled ? 0.5 : 1};
	user-select: none;
	${(props) => props.fontSize ? `font-size: ${props.fontSize}px;` : ''}
`;
const StyledIcon = styled(styled.span(space)) `
	font-size: ${(props) => props.theme.toolbarIconSize}px;
	${(props) => props.animation ? `animation: ${props.animation}` : ''};
`;
const StyledButtonPrimary = styled(StyledButtonBase) `
	border: none;
	background-color: ${(props) => props.theme.backgroundColor5};

	${(props) => props.disabled} {
		&:hover {
			background-color: ${(props) => props.theme.backgroundColorHover5};
		}

		&:active {
			background-color: ${(props) => props.theme.backgroundColorActive5};
		}
	}

	${StyledIcon} {
		color: ${(props) => props.theme.color5};
	}

	${StyledTitle} {
		color: ${(props) => props.theme.color5};
	}
`;
const StyledButtonSecondary = styled(StyledButtonBase) `
	border: 1px solid ${(props) => props.theme.borderColor4};
	background-color: ${(props) => props.theme.backgroundColor4};

	${(props) => props.disabled} {
		&:hover {
			background-color: ${(props) => props.theme.backgroundColorHover4};
		}

		&:active {
			background-color: ${(props) => props.theme.backgroundColorActive4};
		}
	}

	${StyledIcon} {
		color: ${(props) => props.theme.color4};
	}

	${StyledTitle} {
		color: ${(props) => props.theme.color4};
	}
`;
const StyledButtonTertiary = styled(StyledButtonBase) `
	border: 1px solid ${(props) => props.theme.color3};
	background-color: ${(props) => props.theme.backgroundColor3};

	&:hover {
		background-color: ${(props) => props.theme.backgroundColorHoverDim3};
	}

	&:active {
		background-color: ${(props) => props.theme.backgroundColorActive3};
	}

	${StyledIcon} {
		color: ${(props) => props.theme.color};
	}

	${StyledTitle} {
		color: ${(props) => props.theme.color};
		opacity: 0.9;
	}
`;
const StyledButtonRecommended = styled(StyledButtonBase) `
	border: 1px solid ${(props) => props.theme.borderColor4};
	background-color: ${(props) => props.theme.warningBackgroundColor};

	${StyledIcon} {
		color: ${(props) => props.theme.color};
	}

	${StyledTitle} {
		color: ${(props) => props.theme.color};
		opacity: 0.9;
	}
`;
const StyledButtonSidebarSecondary = styled(StyledButtonBase) `
	background: none;
	border-color: ${(props) => props.theme.color2};
	color: ${(props) => props.theme.color2};

	&:hover {
		color: ${(props) => props.theme.colorHover2};
		border-color: ${(props) => props.theme.colorHover2};
		background: none;

		${StyledTitle} {
			color: ${(props) => props.theme.colorHover2};
		}

		${StyledIcon} {
			color: ${(props) => props.theme.colorHover2};
		}
	}

	&:active {
		color: ${(props) => props.theme.colorActive2};
		border-color: ${(props) => props.theme.colorActive2};
		background: none;

		${StyledTitle} {
			color: ${(props) => props.theme.colorActive2};
		}

		${StyledIcon} {
			color: ${(props) => props.theme.colorActive2};
		}
	}

	${StyledTitle} {
		color: ${(props) => props.theme.color2};
	}

	${StyledIcon} {
		color: ${(props) => props.theme.color2};
	}
`;
function buttonClass(level) {
    if (level === ButtonLevel.Primary)
        return StyledButtonPrimary;
    if (level === ButtonLevel.Tertiary)
        return StyledButtonTertiary;
    if (level === ButtonLevel.SidebarSecondary)
        return StyledButtonSidebarSecondary;
    if (level === ButtonLevel.Recommended)
        return StyledButtonRecommended;
    return StyledButtonSecondary;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied;
const Button = React.forwardRef((props, ref) => {
    const iconOnly = props.iconName && !props.title;
    const StyledButton = buttonClass(props.level);
    function renderIcon() {
        var _a;
        if (!props.iconName)
            return null;
        return React.createElement(StyledIcon, { "aria-label": (_a = props.iconLabel) !== null && _a !== void 0 ? _a : '', animation: props.iconAnimation, mr: iconOnly ? '0' : '6px', color: props.color, className: props.iconName, role: 'img' });
    }
    function renderTitle() {
        if (!props.title)
            return null;
        return React.createElement(StyledTitle, { color: props.color }, props.title);
    }
    function onClick() {
        if (props.disabled)
            return;
        props.onClick();
    }
    return (React.createElement(StyledButton, { ref: ref, fontSize: props.fontSize, isSquare: props.isSquare, size: props.size, style: props.style, disabled: props.disabled, title: props.tooltip, className: props.className, iconOnly: iconOnly, onClick: onClick, "aria-disabled": props.disabled, "aria-expanded": props['aria-expanded'], "aria-controls": props['aria-controls'] },
        renderIcon(),
        renderTitle()));
});
exports.default = styled(Button) `${space}`;
//# sourceMappingURL=Button.js.map