"use client";
import { usePermission } from "@/utils/auth/permission";
import getData from "@/utils/fetch";
import { useParseError } from "@/utils/lib/helpers";
import { useQuery } from "@tanstack/react-query";
import { Spinner } from "flowbite-react";
import { FC, useState } from "react";
import { toast } from "react-toastify";
import ActionButton from "../action-button";
import DeleteItem from "../common/delete-item";
import DataTable from "../dataTable/data-table-fb";
import MikrotikPackageForm from "./mikrotik-package-form";

type props = {
  networkId?: string | number | undefined;
};

const MikrotikPackageList: FC<props> = ({ networkId }) => {
  const getMikrotikPackages = async () => {
    const data = await getData(
      `/api/v1/mikrotik-packages?network_id=${networkId}`
    );
    if (!data?.success) {
      return toast.error(useParseError(data));
    }
    return data?.data;
  };
  const { data: mikrotikPackages, isLoading } = useQuery({
    queryKey: ["mikrotik-packages"],
    queryFn: () => getMikrotikPackages(),
    retry: 0,
    enabled: !!networkId,
  });

  const columns = [
    {
      header: "sl",
      accessorKey: "sl",
    },
    {
      header: "Network",
      accessorKey: "network.name",
    },
    {
      header: "name",
      accessorKey: "name",
    },
    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const packages = row.original;
        const [isOpen, setOpen] = useState(false);
        return (
          <>
            <div className=" flex">
              <div className="mr-2">
                {usePermission("mikrotik-packages.edit") && (
                  <ActionButton
                    type="edit"
                    onClick={() => {
                      setOpen(true);
                    }}
                  />
                )}
                {isOpen && (
                  <MikrotikPackageForm
                    mikrotikPackage={packages}
                    isOpen={isOpen}
                    setOpen={setOpen}
                    mode="edit"
                  />
                )}
              </div>
              {usePermission("mikrotik-packages.delete") && (
                <DeleteItem
                  name="MikrotikPackage"
                  url={`/api/v1/mikrotik-packages/${packages?.id}?network_id=${packages?.network_id}`}
                  keys="mikrotik-packages"
                />
              )}
            </div>
          </>
        );
      },
    },
  ];

  return (
    <>
      {isLoading && (
        <div className="text-center">
          <Spinner
            aria-label="Center-aligned spinner example"
            className="mt-20"
            size="xl"
          />
        </div>
      )}
      {mikrotikPackages !== undefined && (
        <div className="user-list pb-20 shadow-md">
          <div className="border-b overflow-x-auto">
            <DataTable data={mikrotikPackages} columns={columns} />
          </div>
        </div>
      )}
    </>
  );
};
export default MikrotikPackageList;