import { usePermission } from "@/utils/auth/permission";
import Link from "next/link";
import { FC, useState } from "react";
import { HiEye } from "react-icons/hi";
import { MdEditSquare } from "react-icons/md";
import { TSclientSchema } from "../forms/schema/client";
import CashPayment from "./client-cash-payment";
import DeleteClient from "./client-delete";
type Props = {
  client: TSclientSchema;
  isOpen?: boolean;
};

const ClientAction: FC<Props> = ({ client, isOpen = false }) => {
  const [isShow, setShow] = useState(isOpen);
  return (
    <>
      <div className="relative flex justify-center">
        <div
          id="dropdownUsers"
          className={`z-10  bg-white absolute -right-3 rounded-lg shadow w-48 dark:bg-gray-700 ${
            !isShow ? "hidden" : ""
          }`}
        >
          <ul
            className="h-auto overflow-y-auto 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 className="flex w-full px-4 py-3 cursor-pointer">
                      <MdEditSquare className="mr-2 text-lg" />
                      <span className="block">Edit</span>
                    </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-3 cursor-pointer">
                      <HiEye className="mr-2 text-lg" />
                      <span className="block">View</span>
                    </div>
                  </Link>
                </>
              )}
            </li>
            <li
              className="hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
              onClick={() => setShow(false)}
            >
              {usePermission("clients.edit") && (
                <>
                  <CashPayment client={client} />
                </>
              )}
            </li>
            <li
              className="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer"
              onClick={() => setShow(false)}
            >
              {usePermission("clients.delete") && (
                <DeleteClient clientIds={[client?.id as string]} />
              )}
            </li>
          </ul>
        </div>
      </div>
    </>
  );
};

export default ClientAction;