/* -------------------------------------------------------------------------- */
/*                                   Imports                                  */
/* -------------------------------------------------------------------------- */
import React from "react";
import classNames from "classnames";
import { StyleType } from "core/_variants";
import * as btnEmphasis from "./_btnEmphasis";
import IconButton from "./IconButton";

/* -------------------------------------------------------------------------- */
/*                           Extention for component                          */
/* -------------------------------------------------------------------------- */

type ButtonExtentions = {
  Icon: React.FC<{
    children: Required<React.ReactElement>;
    className?: string;
  }>;
};

/* -------------------------------------------------------------------------- */
/*                               Component props                              */
/* -------------------------------------------------------------------------- */
type ButtonProps = {
  defaultStyle?: boolean;
  emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high"
  disabled?: boolean;
} & Omit<React.ComponentPropsWithoutRef<"button">, "">;

/* -------------------------------------------------------------------------- */
/*                          Component implementation                          */
/* -------------------------------------------------------------------------- */
export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
  defaultStyle = true,
  emphasis = "high",
  disabled = false,
  className,
  children,
  ...props
}) => {
  const isOnlyIcon =
    children &&
    React.isValidElement(children) &&
    React.Children.only(children).type == IconButton;

  const padding = isOnlyIcon ? "px-2.5 py-2" : "px-4 py-2";

  return (
    <button
      //TODO change on click event
      onClick={!disabled ? () => {} : undefined}
      className={classNames([
        "flex content-center justify-between",
        "text-center",
        padding,
        "rounded",
        {
          "!cursor-default": disabled,
          "transition-all": !disabled,
          "transition duration-200": !disabled,
        },
        {
          // Define high emphasis
          [`${btnEmphasis.EnableHigh}`]:
            defaultStyle && !disabled && emphasis === "high",
          [`${btnEmphasis.DisabledHigh}`]:
            defaultStyle && disabled && emphasis === "high",
          [`${btnEmphasis.GeneralHigh}`]: defaultStyle && emphasis === "high",
          // Define medium emphasis
          [`${btnEmphasis.EnabledMedium}`]:
            defaultStyle && !disabled && emphasis === "medium",
          [`${btnEmphasis.DisabledMedium}`]:
            defaultStyle && disabled && emphasis === "medium",
          [`${btnEmphasis.GeneralMedium}`]:
            defaultStyle && emphasis === "medium",
          // Define low emphasis
          [`${btnEmphasis.EnabledLow}`]:
            defaultStyle && !disabled && emphasis === "low",
          [`${btnEmphasis.DisabledLow}`]:
            defaultStyle && disabled && emphasis === "low",
          [`${btnEmphasis.GenerealLow}`]: defaultStyle && emphasis === "low",
        },
        className,
      ])}
      {...props}
    >
      {children}
    </button>
  );
};

Button.Icon = IconButton;