import Link from "next/link";
import { FC } from "react";
import { HiArrowCircleLeft, HiChat, HiEye, HiPlus, HiTrash, } from "react-icons/hi";
import { MdChatBubble, MdEditSquare, MdOutlineChatBubble, MdReplay } from "react-icons/md";
import Button from "./Button";
import Spinner from "./spinner";
import { twMerge } from "tailwind-merge";

type props = {
  type: string;
  children?: any | undefined;
  color?: string;
  onClick?: () => void;
  href?: string | undefined;
  className?: string | undefined;
  isLoading?: boolean;
  title?: string | undefined;
  size?: string;
  target?: string;
  Icon?: any
  isDisabled?: boolean;
};

const ActionButton: FC<props> = ({
  type,
  children = undefined,
  color = "blue",
  onClick = () => { },
  href = undefined,
  className = "",
  title = undefined,
  isLoading = false,
  size = "md",
  target = "_self",
  Icon = undefined,
  isDisabled = false
}) => {
  return (
    <>
      {type === "any" && (
        <Button
          buttonType={type}
          color={color}
          onClick={() => onClick()}
          disabled={isLoading || isDisabled}
          size={size}
          className={twMerge(className)}
        >
          <div className="flex gap-1 h-full">
            {isLoading && <Spinner className="mr-1" />}
            {Icon && (
              <div className="flex-1 mt-1">
                <Icon />
              </div>
            )}
            <div className="">
              {children ? children : title ? title : "Button"}
            </div>
          </div>
        </Button>
      )}
      {type === "submit" && (
        <Button
          buttonType={"submit"}
          color="blue"
          onClick={() => onClick()}
          disabled={isLoading || isDisabled}
        >
          {isLoading && <Spinner className="mr-1" />}
          {children ? children : title ? title : "Submit"}
        </Button>
      )}
      {type === "edit" && (
        <Button
          className={`bg-gray-50 dark:bg-gray-800 dark:!border dark:hover:bg-gray-700 hover:!bg-gray-300 ${className}`}
          size="xs"
          onClick={() => onClick()}
        >
          <MdEditSquare className="text-lg text-blue-600" />
          {children && children}
        </Button>
      )}
      {type === "delete" && (
        <Button
          className={`bg-gray-50 dark:gray-800 hover:!bg-gray-300 ${className}`}
          size="xs"
          onClick={() => onClick()}
        >
          <HiTrash className="text-sm text-red-700" />
          {children && children}
        </Button>
      )}
      {type === "view" && (
        <Button
          className={`bg-gray-50 dark:!bg-gray-800 hover:!bg-gray-300 ${className}`}
          size="xs"
          onClick={() => onClick()}
        >
          <HiEye className="text-lg text-blue-600" />
          {children && children}
        </Button>
      )}
      {type === "reply" && (
        <Button
          className={`bg-gray-50 dark:!bg-gray-800 hover:!bg-gray-300 ${className}`}
          size="xs"
          onClick={() => onClick()}
        >
          <HiChat className="text-lg text-blue-600" />
          {children && children}
        </Button>
      )}
      {type === "back" && href && (
        <Link href={href} target={target}>
          <Button color={color} size={size} className={className}>
            {!children && <HiArrowCircleLeft className={"mr-2 mt-1"} />}
            {children ? children : <span> {title ? title : "back"}</span>}
          </Button>
        </Link>
      )}
      {type === "add" && (
        <Button
          color={color}
          size="sm"
          onClick={() => onClick()}
          className={className}
          isProcessing={isLoading}
        >
          <div className="flex">
            <HiPlus className={"mr-1 mt-0.5 text-lg"} />
            <span>{children ? children : title}</span>
          </div>
        </Button>
      )}
    </>
  );
};

export default ActionButton;