"use client";
import { usePermission } from "@/utils/auth/permission";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Alert, Pagination, Spinner } from "flowbite-react";
import { FC, useState } from "react";
import { HiInformationCircle } from "react-icons/hi";
import { MdEditSquare } from "react-icons/md";
import Button from "../Button";
import DeleteItem from "../common/delete-item";
import DataTable from "../dataTable/data-table-fb";
import SubZoneEdit from "./sub-zone-edit";

type props = {
  setSubZoneIds: Function;
  subZoneIds: string[];
};

const SubZoneList: FC<props> = ({ setSubZoneIds, subZoneIds }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pagination, setPagination] = useState<any>({});
  const [isOpen, setOpen] = useState(false);
  const [sub_zone_id, setSubZoneId] = useState<string | null>(null);

  const onPageChange = (page: number) => setCurrentPage(page);
  const getZones = async () => {
    const {
      data: { data },
      data: {
        data: { pagination },
      },
    } = await axios.get(`/api/sub-zones?page=${currentPage}`);
    setPagination(pagination);
    return data?.data;
  };
  const {
    data: subZones,
    isLoading,
    isError,
    error = {} as any,
  } = useQuery({
    queryKey: ["sub-zones", { currentPage }],
    placeholderData: keepPreviousData,
    queryFn: () => getZones(),
    retry: 0,
  });

  const columns = [
    {
      header: "Sub Zone",
      accessorKey: "name",
      cell: ({ row }: any) => {
        const subZone = row.original;
        return <div>{`${subZone?.name} `}</div>;
      },
    },
    {
      header: "Zone",
      accessorKey: "zone",
      cell: ({ row }: any) => {
        const subZone = row.original;
        return <div>{subZone?.zone?.name}</div>;
      },
    },
    {
      header: "Location",
      accessorKey: "location",
    },
    {
      header: "Network",
      accessorKey: "network.name",
      cell: ({ row }: any) => {
        const subZone = row.original;
        return <div>{subZone?.network?.name}</div>;
      },
    },
    {
      header: "Ports",
      accessorKey: "ports",
    },
    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const subZone = row.original;
        const subZone_id: string = String(subZone.id);
        return (
          <>
            <div className=" flex">
              <div className="mr-2">
                {usePermission("sub-zones.edit") && (
                  <Button
                    size="xs"
                    className="bg-gray-50 hover:!bg-gray-300"
                    onClick={() => {
                      setOpen(true);
                      setSubZoneId(subZone_id);
                    }}
                  >
                    <MdEditSquare className="text-lg text-blue-600" />
                  </Button>
                )}
              </div>
              {usePermission("sub-zones.delete") && (
                <DeleteItem
                  keys="sub-zones"
                  url={`/api/v1/sub-zones/${subZone_id}`}
                  name="Sub Zone"
                />
              )}
            </div>
          </>
        );
      },
    },
  ];

  return (
    <>
      {isLoading && (
        <div className="text-center">
          <Spinner
            aria-label="Center-aligned spinner example"
            className="mt-20"
            size="xl"
          />
        </div>
      )}
      {isError && (
        <Alert color="failure" icon={HiInformationCircle}>
          <span className="font-medium">Info alert!</span>
          {error.response.data.error.message}
        </Alert>
      )}
      {isOpen && (
        <SubZoneEdit
          subZoneId={sub_zone_id}
          setOpen={setOpen as () => void}
          isOpen={isOpen}
        />
      )}
      {subZones !== undefined && (
        <div className="user-list pb-20 shadow-md">
          <div className="border-b overflow-x-auto">
            <DataTable data={subZones} columns={columns} />
          </div>

          <div className="flex justify-between overflow-x-auto">
            <div className="flex">
              <Pagination
                className="ml-2 mt-2"
                layout="navigation"
                currentPage={currentPage}
                totalPages={pagination.total_pages || 0}
                onPageChange={onPageChange}
                showIcons
                nextLabel=""
                previousLabel=""
              />
              <div className="ml-2 mt-5">
                <p className="text-gray-500">
                  Showing
                  <span className="ml-2 mr-1 mt-1 text-gray-900">
                    {(pagination.current_page - 1) * 10 < 1
                      ? 1
                      : (pagination.current_page - 1) * 10}{" "}
                    - {pagination.current_page * 10}
                  </span>{" "}
                  of <span className="text-gray-900"> {pagination.total}</span>{" "}
                </p>
              </div>
            </div>
            <Pagination
              currentPage={currentPage}
              totalPages={pagination.total_pages || 0}
              onPageChange={onPageChange}
              className="mr-2 mt-2 text-blue-900 sm:justify-end"
              showIcons
              color="blue"
            />
          </div>
        </div>
      )}
    </>
  );
};
export default SubZoneList;