import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
import { FaCheck, FaDatabase } from "react-icons/fa";

import AddAccountModal from "../accounts/AddAccountModal";
import { Bounce, toast } from "react-toastify";
import api from "../../config/api";
import { useState } from "react";

const Templates = () => {
  const [openMenuId, setOpenMenuId] = useState<string | null>(null);


  const handleAction = async (accountId: string, action: 'accept' | 'reject') => {
    try {
      let response = await api.post(`/api/accounts/${accountId}/accept/invite`)
      console.log(response)
      if (response.data.status === 202) {
        toast.success("Login Successful", {
          position: "top-center",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: false,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "light",
          transition: Bounce,
        });
      }
    } catch (error) {
      console.error('Error posting data:', error);
    } finally {
      setOpenMenuId(null); // close menu
    }
  };

  return (
    <>

      <div className="overflow-x-auto py-2">
        <table className="min-w-full text-sm border border-gray-200 rounded bg-white shadow-sm">
          <thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider">
            <tr>
              <th className="px-4 py-3 w-12"></th>
              <th className="px-4 py-3 text-left">Name</th>
              <th className="px-4 py-3 text-center">Owner</th>
              <th className="px-4 py-3 text-center">Created Date</th>
              <th className="px-4 py-3 text-center">Last Change</th>
              <th className="px-4 py-3 text-center"></th>
              <th className="px-4 py-3 text-center"></th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">


            <tr
              className="hover:bg-gray-50 cursor-pointer"
            >
              <td className="px-4 py-3">
                <div className="w-5 h-5 rounded border border-slate-300 flex justify-center items-center">
                  {/* {selectedTransactions.includes(tx.id) && (
                    <FaCheck className="text-purple-600 text-sm" />
                  )} */}
                </div>
              </td>
              <td className="px-4 py-3">
                <div className="flex items-center gap-2">
                  <span>{"test"}</span>
                </div>
              </td>
              <td className="px-4 py-3 text-center">{"1"}</td>
              <td className="px-4 py-3 text-center">
                <span className={`px-2 py-0.5 rounded-xl text-xs font-medium`}>
                  {"role"}
                </span>
              </td>
              <td className="px-4 py-3 text-center">
                <span className={`px-2 py-0.5 rounded-xl text-xs font-medium`}>
                  {"text"}
                </span>
              </td>

              <td>

              </td>

              <td className="px-4 py-3 text-center relative">
                <button

                  className="mx-auto"
                  aria-label="Actions menu"
                >
                  <PiDotsThreeOutlineVerticalFill className="text-lg text-slate-300 hover:text-black" />
                </button>

                {/* Dropdown menu */}
                {/* {openMenuId === "1" && (
                      <div
                        className="absolute right-13 top-6  mt-1  w-18 bg-white border text-[13px] font-bold border-gray-300 rounded-md shadow-lg z-10"
                        onClick={(e) => e.stopPropagation()} // prevent row click closing
                      >
                        <button
                          className="w-full px-3 py-1 text-left text-green-700 hover:bg-green-100 rounded-t-md cursor-pointer"
                          onClick={() => handleAction(1, 'accept')}
                        >
                          Accept
                        </button>
                        <button
                          className="w-full px-3 py-1 text-left text-red-700 hover:bg-red-100 rounded-b-md cursor-pointer"
                          onClick={() => handleAction(1, 'reject')}
                        >
                          Reject
                        </button>
                      </div>
                    )} */}
              </td>

            </tr>

          </tbody>
        </table>
      </div>

    </>
  );
};

export default Templates;