import { usePermission } from "@/utils/auth/permission";
import Link from "next/link";
import { FC, useState } from "react";
import { CiWallet } from "react-icons/ci";
import { HiEye } from "react-icons/hi";
import { MdEditSquare, MdLock } from "react-icons/md";
import DeleteItem from "../common/delete-item";
import WalletRechargeForm from "../common/wellat-recharge";
import { TSresellerSchema } from "../forms/schema/reseller";
type Props = {
  reseller: TSresellerSchema;
};

const ResellerAction: FC<Props> = ({ reseller }) => {
  const [isWallerOpen, setWallerOpen] = useState(false);
  return (
    <>
      <div
        className={`bg-white rounded-lg shadow 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("resellers.edit") && (
              <>
                <Link href={`/resellers/edit/${reseller?.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("resellers.show") && (
              <>
                <Link href={`/resellers/view/${reseller?.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">
            {usePermission("resellers.edit") && (
              <>
                <Link href={`/permissions/${reseller?.id}?type=reseller`}>
                  <div className="flex w-full px-4 py-3 cursor-pointer">
                    <MdLock className="mr-2 text-lg" />
                    <span className="block">Permissions</span>
                  </div>
                </Link>
              </>
            )}
          </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"
          >
            {usePermission("wallets.create") && (
              <div>
                <div className="flex" onClick={() => setWallerOpen(true)}>
                  <CiWallet className="text-lg" />
                  <div className="ml-3">Wallets</div>
                </div>
                <WalletRechargeForm
                  company={reseller}
                  isOpen={isWallerOpen}
                  setOpen={setWallerOpen}
                />
              </div>
            )}
          </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"
          >
            {usePermission("resellers.delete") && (
              <>
                <DeleteItem
                  name="Reseller"
                  keys="resellers"
                  url={`/api/v1/resellers/${reseller?.id}`}
                  type="dropdown"
                  message="All clients, invoices, payment along with other reseller data will be deleted"
                />
              </>
            )}
          </li>
        </ul>
      </div>
    </>
  );
};

export default ResellerAction;