import { HTMLAttributes, ReactElement } from "react";
import { ButtonProps as MUIButtonProps } from "@mui/material";
import type { TooltipProps } from "../tooltip/Tooltip";
import type { IconProps } from "../icon/Icon";

export type ButtonVariant =
  | "primary"
  | "secondary"
  | "tertiary"
  | "outlined"
  | "danger";

type NavTo = string | { pathname: string; state?: any };
export type ButtonSize = "tiny" | "small" | "default" | "large";

export interface ButtonProps
  extends Omit<MUIButtonProps, "size" | "variant" | "color" | "className">,
    Omit<HTMLAttributes<HTMLButtonElement>, "style" | "className" | "color"> {
  children?: React.ReactNode;
  disabled?: boolean;
  fullWidth?: boolean;
  variant?: ButtonVariant;
  type?: "submit" | "reset" | "button";
  size?: ButtonSize;
  icon?: IconProps["name"];
  iconPosition?: "start" | "end";
  iconWeight?: IconProps["weight"];
  to?: NavTo;
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  linkComponent?: React.ComponentType<any>;
  tooltip?: string | ReactElement;
  tooltipProps?: Partial<TooltipProps>;
  ESCAPE_className?: string;
}

export type MUIButtonPropWithLink = MUIButtonProps & {
  component?: React.ComponentType<any>;
  to?: NavTo;
};

export type StyleProps = {
  hasIcon: boolean;
  hasLabel: boolean;
  variant: ButtonVariant;
  size: ButtonSize;
};
