import React from "react";
import Icon from "../Icon";
import Loader from "../Loader";

import * as S from "./style";

enum buttonStyles {
	SOLID = "solid",
	TEXT = "text",
	LINE = "line",
	INVERSE = "lineInverse",
	MINIMAL = "minimal",
}

const Button = (props: IButtonProps): JSX.Element => {
	const { children, type, disabled, icon, buttonStyle, onClick, className, loader, backIcon, iconFill = true } = props;

	const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
		if (onClick !== undefined) {
			e.preventDefault();
			onClick(e);
		}
	};

	const iconSize = buttonStyle === buttonStyles.MINIMAL ? "16" : "24";

	const iconWrapper = icon ? <Icon name={icon} size={iconSize} /> : loader ? <Loader name={loader} /> : <></>;
	const iconBackWrapper = backIcon ? <Icon name={backIcon} /> : <></>;

	const buttonContent = (
		<S.Label icon={icon || loader} backIcon={backIcon}>
			{iconWrapper}
			<span>{children}</span>
			{iconBackWrapper}
		</S.Label>
	);

	const isInverse = buttonStyle === "lineInverse";

	switch (buttonStyle) {
		case buttonStyles.TEXT:
			return (
				<S.TextButton
					data-testid="button-text"
					className={className}
					type={type}
					disabled={disabled}
					onClick={handleOnClick}
				>
					{buttonContent}
				</S.TextButton>
			);
		case buttonStyles.LINE:
		case buttonStyles.INVERSE:
			return (
				<S.LineButton
					data-testid="button-line-inverse"
					className={className}
					type={type}
					disabled={disabled}
					onClick={handleOnClick}
					isInverse={isInverse}
				>
					{buttonContent}
				</S.LineButton>
			);
		case buttonStyles.MINIMAL:
			return (
				<S.MinimalButton
					data-testid="button-minimal"
					className={className}
					type={type}
					disabled={disabled}
					onClick={handleOnClick}
				>
					{buttonContent}
				</S.MinimalButton>
			);
		default:
			return (
				<S.Button
					data-testid="button-default"
					className={className}
					type={type}
					disabled={disabled}
					onClick={handleOnClick}
					iconFill={iconFill}
				>
					{buttonContent}
				</S.Button>
			);
	}
};

export interface IButtonProps {
	children: JSX.Element | string;
	type?: "button" | "submit" | "reset";
	onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
	icon?: string;
	loader?: string;
	disabled?: boolean;
	buttonStyle?: "solid" | "text" | "line" | "lineInverse" | "minimal";
	className?: string;
	backIcon?: string;
	iconFill?: boolean;
}

export default Button;
