import Image from "next/image";
import React, { CSSProperties } from "react";

import classes from "./classes.module.scss";
import classNames from "classnames";

export enum EButtonColor {
	PRIMARY = "primary",
	SECONDARY = "secondary",
	NEUTRAL = "neutral",
	ERROR = "error",
	WARNING = "warning",
	SUCCESS = "success",
	INFO = "info",
}

export enum EButtonSize {
	LG = "lg",
	MD = "md",
	SM = "sm",
}

export enum EButtonStyleType {
	CONTAINED = "contained",
	OUTLINED = "outlined",
	TEXT = "text",
}

type IProps = {
	onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
	children?: React.ReactNode;
	variant?: EButtonColor;
	size?: EButtonSize;
	styleType?: EButtonStyleType;
	fullwidth?: boolean;
	icon?: string;
	iconstyle?: CSSProperties;
	disabled?: boolean;
	isLoading?: boolean;
	type?: "button" | "submit";
	iconposition?: "left" | "right";
	className?: string;
};

export default function Button(props: IProps) {
	let {
		variant = EButtonColor.PRIMARY,
		size = EButtonSize.LG,
		styleType = EButtonStyleType.CONTAINED,
		disabled = false,
		type = "button",
		isLoading = false,
		fullwidth = false,
		iconposition = "right",
		onClick,
		children,
		icon,
		iconstyle,
		className = "",
	} = props;

	const fullwidthattr = fullwidth.toString();
	const isloadingattr = isLoading.toString();

	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, sizing: size, styleType };
	delete attributes.fullwidth;
	delete attributes.icon;
	delete attributes.iconstyle;
	delete attributes.iconposition;

	return (
		<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
			{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
			{children}
			{icon && iconposition === "right" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
		</button>
	);
}