import React, { MouseEventHandler, useMemo, ReactElement } from "react";
import useThrottle from "../../customHooks/useThrottle";

export type ButtonProps = {
  onClick: MouseEventHandler<HTMLButtonElement>;
  text: string | React.ReactElement;
  className?: string;
  disabled?: boolean;
  loading?: boolean;
  type: "Primary" | "Secondary" | "Positive" | "Negative" | "Neutral";
  customBackgroundColor?: string;
  icon?: string | React.ReactElement;
  throttleTime?: number;
  tooltip?: string | React.ReactElement;
};

export default function Button({
  onClick,
  text,
  className,
  disabled = false,
  loading = false,
  type,
  customBackgroundColor,
  icon,
  throttleTime = 300,
  tooltip,
}: ButtonProps): ReactElement {
  const baseClassName = useMemo(() => {
    switch (type) {
      case "Primary":
        return "text-white bg-interactive-primary-default hover:bg-interactive-primary-hover active:bg-interactive-primary-pressed disabled:text-neutral-medium-light disabled:bg-neutral-light rounded-lg";
      case "Secondary":
        return "text-interactive-primary-default bg-interactive-secondary-default hover:bg-interactive-secondary-hover active:bg-interactive-secondary-pressed disabled:text-neutral-medium-light disabled:bg-neutral-light rounded-lg";
      case "Positive":
        return "text-white bg-semantic-ok hover:bg-interactive-ok-hover active:bg-interactive-ok-pressed disabled:text-neutral-medium-light disabled:bg-neutral-light rounded-lg";
      case "Negative":
        return "text-white bg-semantic-alarm hover:bg-interactive-alarm-hover active:bg-interactive-alarm-pressed disabled:text-neutral-medium-light disabled:bg-neutral-light rounded-lg";
      case "Neutral":
        return "text-neutral-medium-dark bg-neutral-very-light hover:bg-neutral-light active:bg-neutral-medium-light rounded-lg";
    }
  }, [type]);

  const throttledClick = useThrottle(onClick, throttleTime);

  return (
    <button
      type="button"
      className={`md:transition-all md:duration-200 group ${
        loading ? "disabled:bg-interactive-primary-pressed" : ""
      } ${baseClassName} ${className} ${
        tooltip && "relative cursor-pointer"
      } focus:outline-none`}
      onClick={throttledClick}
      disabled={disabled || loading}
      style={{ backgroundColor: `#${customBackgroundColor}` }}
    >
      {tooltip && (
        <div
          className={`w-full min-w-fit group-hover:flex hidden px-1 py-3 z-10 left-0 bottom-[120%] absolute flex-row bg-semantic-info shadow-lg rounded-lg`}
          onClick={(event) => event.stopPropagation()}
        >
          <span className="px-2 max-w-sm self-center text-sm leading-tight text-white">
            {tooltip}
          </span>
        </div>
      )}
      <div className="flex items-center content-center justify-center h-full w-full relative">
        {icon && <div className="mr-4">{icon}</div>}
        <div
          className={`${
            loading ? "invisible" : ""
          } font-mono font-bold tracking-wider leading-normal`}
        >
          {text}
        </div>
        <svg
          className={`${
            loading ? "" : "invisible"
          } animate-spin absolute h-8 w-8 text-white`}
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
        >
          <circle
            className="opacity-25"
            cx="12"
            cy="12"
            r="10"
            stroke="currentColor"
            strokeWidth="4"
          ></circle>
          <path
            className="opacity-75"
            fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
          ></path>
        </svg>
      </div>
    </button>
  );
}