import {
  Button as BaseButton,
  ButtonProps as BaseButtonProps,
} from "@nextui-org/react";
import { JSX } from "react";

function ButtonSpinner() {
  return (
    <svg
      className="animate-spin h-5 w-5 text-current"
      fill="none"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle
        className="opacity-25"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        strokeWidth="4"
      />
      <path
        className="opacity-75"
        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"
        fill="currentColor"
      />
    </svg>
  );
}

type ButtonProps = {
  btnLabel?: string | JSX.Element;
  customVariant?:
    | "primary"
    | "secondary"
    | "transparent"
    | "transparent-black"
    | "userViewing"
    | "client"
    | "black"
    | "white"
    | "b2b"
    | "no-border"
    | "linkedin";
  onClick?: () => void;
};

export type ButtonComponentProps = ButtonProps & BaseButtonProps;

function Button({
  children,
  className,
  startContent,
  endContent,
  btnLabel,
  isDisabled,
  size = "md",
  isIconOnly,
  variant = "solid",
  isLoading,
  color = "default",
  spinner = <ButtonSpinner />,
  fullWidth,
  customVariant,
  href,
  type = "button",
  onClick,
}: ButtonComponentProps) {
  const variantClasses = {
    primary:
      "bg-black dark:bg-[#E0E0E0] text-white dark:text-black hover:outline hover:outline-black hover:dark:outline-[#E0E0E0] hover:outline-offset-2 disabled:opacity-50",
    secondary:
      "bg-chocolate dark:bg-tiffany-blue text-white dark:text-black hover:outline hover:outline-chocolate hover:dark:outline-tiffany-blue hover:outline-offset-2",
    transparent:
      "bg-transparent text-black dark:text-white border-[1px] border-black dark:border-white hover:bg-white hover:dark:bg-white/20 hover:outline hover:outline-black hover:dark:outline-white hover:outline-offset-2",
    "transparent-black":
      "bg-transparent text-black border-[1px] border-black hover:bg-white hover:outline hover:outline-black hover:outline-offset-2",
    userViewing:
      "bg-midnightBlue text-white hover:outline hover:outline-midnightBlue hover:outline-offset-2",
    client:
      "bg-paleBlue text-black hover:opacity-80 hover:outline hover:outline-paleBlue hover:outline-offset-2",
    black:
      "bg-black text-white hover:opacity-80 hover:outline hover:outline-black hover:outline-offset-2",
    white:
      "bg-white dark:bg-black text-black dark:text-white hover:opacity-80 hover:outline hover:outline-white dark:hover:outline-black hover:outline-offset-2",
    b2b: "bg-b2b-teal-blue dark:bg-b2b-spring-rain text-white dark:text-black hover:outline hover:outline-b2b-teal-blue hover:dark:outline-b2b-spring-rain hover:outline-offset-2",
    "no-border": "bg-transparent text-black dark:text-white",
    linkedin:
      "bg-[#0077B5] text-white hover:opacity-90 hover:outline hover:outline-[#0077B5] hover:outline-offset-2",
  };

  const colorClasses = customVariant ? variantClasses[customVariant] : variant;

  const handleKeyDown = (
    event: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>
  ) => {
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      if (onClick) onClick();
    }
  };

  return (
    <BaseButton
      disableAnimation
      disableRipple
      className={`${className} ${colorClasses} ${
        isDisabled && "cursor-not-allowed"
      } font-inter text-sm font-semibold px-4`}
      color={color}
      endContent={endContent}
      fullWidth={fullWidth}
      href={href}
      isDisabled={isDisabled}
      isIconOnly={isIconOnly}
      isLoading={isLoading}
      radius="full"
      size={size}
      spinner={spinner}
      startContent={startContent}
      type={type}
      variant={variant}
      onKeyDown={handleKeyDown}
      onPress={onClick}
    >
      {btnLabel}
      {children}
    </BaseButton>
  );
}

export default Button;