import { usePermission } from "@/utils/auth/permission";
import Link from "next/link";
import { FC, useState } from "react";
import { FaRegMoneyBillAlt } from "react-icons/fa";
import { HiEye, HiOutlineCash } from "react-icons/hi";
import { MdEditSquare, MdOutlineSms, MdOutlineSupportAgent, MdUpdate } from "react-icons/md";
import DeleteItem from "../common/delete-item";
import { TSclientSchema } from "../forms/schema/client";
import dynamic from "next/dynamic";
import Spinner from "../spinner";
import { twMerge } from "tailwind-merge";
import { BsBoxes } from "react-icons/bs";
import ClientChangePackage from "./client-change-package";
import BulkInvoicePayModal from "../invoices/bulk-invoice-pay-modal";
const InvoicePayModal = dynamic(() => import("../invoices/bulk-invoice-pay-modal"))
type Props = {
  client: TSclientSchema;
  isOpen?: boolean;
};

const ClientAction: FC<Props> = ({ client }) => {
  const [isInvoicePay, setInvoicePay] = useState(false);
  const [isLoading, setLoading] = useState(false);
  const [openPackage, setPackageOpen] = useState(false);
  return (
    <>
      <div
        className={` bg-white  shadow-lg border w-48 dark:bg-gray-700`}
      >
        <ul
          className=" text-gray-700 dark:text-gray-200"
          aria-labelledby="dropdownUsersButton"
        >
          <li className="hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
            {usePermission("clients.edit") && (
              <>
                <Link href={`/clients/edit/${client?.id}`}>
                  <div onClick={() => setLoading(true)} className={twMerge(`flex justify-between w-full px-4 py-2 cursor-pointer`, isLoading && "disabled")}>
                    <div className="flex">
                      <MdEditSquare className="mr-2 text-lg" />
                      <span className="block">Edit</span>
                    </div>
                    {isLoading && <Spinner size="sm" />}
                  </div>
                </Link>
              </>
            )}
          </li>
          <li className="hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
            {usePermission("clients.show") && (
              <>
                <Link href={`/clients/view/${client?.id}`}>
                  <div className="flex w-full px-4 py-2 cursor-pointer">
                    <HiEye className="mr-2 text-lg" />
                    <span className="block">View</span>
                  </div>
                </Link>
              </>
            )}
          </li>
          {usePermission("invoices.access") && (
            <>
              <li
                className="hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"

              >
                <Link href={`/invoices/client/${client?.id}`}>
                  <div className="w-full px-4 py-2 flex cursor-pointer">
                    <FaRegMoneyBillAlt className="text-lg mr-3" />
                    <p>Invoice History</p>
                  </div>
                </Link>
              </li>
            </>
          )}
          {usePermission("invoices.pay") && (client?.invoiceDue?.[0]?.uuid) && (
            <>
              <li className="hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                <div onClick={() => setInvoicePay(true)} className="w-full px-4 py-2 flex cursor-pointer">
                  <HiOutlineCash className="text-lg mr-3" />
                  <p>Pay</p>
                </div>
                {isInvoicePay && (
                  <BulkInvoicePayModal
                    client={client}
                    isOpen={isInvoicePay}
                    setOpen={setInvoicePay}
                  />
                )}
              </li>
            </>
          )}
          {usePermission("invoices.pay") && (
            <>
              <li className="hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                <div onClick={() => setPackageOpen(true)} className="w-full px-4 py-2 flex cursor-pointer">
                  <MdUpdate className="text-lg mr-3" />
                  <p>Change package</p>
                </div>
                {openPackage && (
                  <ClientChangePackage client={client} isOpen={openPackage} setOpen={setPackageOpen} />
                )}
              </li>
            </>
          )}
          {usePermission("sms-send.access") && client?.phone && (
            <>
              <li
                className="hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"

              >
                <Link href={`/sms-send?phone=${client?.phone}`}>
                  <div className="w-full px-4 py-2 flex cursor-pointer">
                    <MdOutlineSms className="text-lg mr-3" />
                    <p>SMS</p>
                  </div>
                </Link>
              </li>
            </>
          )}
          {usePermission("tickets.create") && (
            <>
              <li
                className="hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"

              >
                <Link href={`/tickets?client_id=${client?.id}`}>
                  <div className="w-full px-4 py-2 flex cursor-pointer">
                    <MdOutlineSupportAgent className="text-lg mr-3" />
                    <p>Tickets</p>
                  </div>
                </Link>
              </li>
            </>
          )}
          <li
            className="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer"

          >
            {usePermission("clients.delete") && (
              <DeleteItem
                name="clients"
                keys="clients"
                url={`/api/v1/clients/${client?.id}`}
                type="dropdown"
                conditional={true}
                conditionalMessage="delete from mikrotik?"
                conditionalParams={"mikrotik_delete=true"}
              />
            )}
          </li>
        </ul>
      </div>
    </>
  );
};

export default ClientAction;