import React from "react";
import Image from "next/image";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

var classNames = require("classnames");

type ButtonProps = {
  text: string;
  onButtonPressed: () => void;
  loading: boolean;
  color: string;
  size: string;
  icon: IconProp;
  active: boolean;
  iconDisabled: string;
  textDisabled: string;
}

export default function Button (props: ButtonProps): JSX.Element {
  // Check if the button show always be 'active' - then true;
  // or if it should switch between 'active' and 'disabled' - then give the status
  const activityStatus = props.active || (props.text != "" && props.textDisabled == undefined)
  
  let styleButton = classNames(
    "group m-auto md:m-0 inline-block rounded-md duration-200",

    // Setting background colors and hover modes
    props.color == "mineshaft" && activityStatus && "bg-mineshaft-700 hover:bg-primary",
    props.color == "mineshaft" && !activityStatus && "bg-mineshaft",
    (props.color == "primary" || !props.color) && activityStatus && "bg-primary hover:opacity-80",
    (props.color == "primary" || !props.color) && !activityStatus && "bg-primary",
    props.color == "red" && "bg-red",

    // Changing the opacity when active vs when not
    activityStatus ? "opacity-100 cursor-pointer" : "opacity-40",

    // Setting the button sizes
    props.size == "md" && "h-10 w-full px-2 md:px-4",
    props.size == "lg" && "h-12 w-full px-2 md:px-8",
    !props.size && "md:py-1 px-3 md:px-8",
    props.size == "icon-md" && "h-10 w-10 flex items-center justify-center",
    props.size == "icon-sm" && "h-9 w-9 flex items-center justify-center"
  );

  let styleMainDiv = classNames(
    "relative font-medium flex items-center",

    // Setting the text color for the text and icon
    props.color == "mineshaft" && "text-gray-400",
    props.color != "mineshaft" && props.color != "red" && "text-black",
    props.color == "red" && "text-gray-200",
    activityStatus && props.color != "red" ? "group-hover:text-black" : "",

    props.size == "icon" && "flex items-center justify-center"
  );

  let textStyle = classNames(
    "relative duration-200",

    // Show the loading sign if the loading indicator is on
    props.loading == true ? "opacity-0" : "opacity-100",
    props.size == "md" && "text-sm",
    props.size == "lg" && "text-lg"
  );

  const button = (
    <button
      disabled={!activityStatus}
      onClick={props.onButtonPressed}
      className={styleButton}
    >
      <div className={styleMainDiv}>
        <div
          className={`${
            props.loading == true ? "opacity-100" : "opacity-0"
          } absolute flex items-center px-2 duration-200`}
        >
          <Image
            src="/images/loading/loadingblack.gif"
            height={25}
            width={42}
            alt="loading animation"
            className={`rounded-xl`}
          ></Image>
        </div>
        {props.icon && (
          <FontAwesomeIcon
            icon={props.icon as IconProp}
            className={`flex my-auto font-extrabold ${
              props.size == "icon-sm" ? "text-sm" : "text-md"
            } ${(props.text || props.textDisabled) && "mr-2"}`}
          />
        )}
        {props.iconDisabled && (
          <FontAwesomeIcon
            icon={props.iconDisabled as IconProp}
            className={`flex my-auto font-extrabold ${
              props.size == "icon-sm" ? "text-sm" : "text-md"
            } ${(props.text || props.textDisabled) && "mr-2"}`}
          />
        )}
        {(props.text || props.textDisabled) && (
          <p className={textStyle}>{activityStatus ? props.text : props.textDisabled}</p>
        )}
      </div>
    </button>
  );

  return button;
}