"use client";
import getData from "@/utils/fetch";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { FC, useEffect, useState } from "react";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import Spinner from "../spinner";

type props = {
  resellerId?: string;
};

const ResellerClient: FC<props> = ({ resellerId }) => {
  const [currentPage, setCurrentPage] = useState<any>(1);
  const [pagination, setPagination] = useState<any>({});

  const onPageChange = (page: number) => setCurrentPage(page);
  let base_url = `/api/v1/resellers/client/${resellerId}?page=${currentPage}`;
  const getResellerClient = async () => {
    const {
      data: { data },
      data: { pagination },
    } = await getData(base_url);
    setPagination(pagination);
    return data;
  };
  const {
    data: clients,
    isLoading,
    isFetching,
    refetch,
    isError,
    error = {} as any,
  } = useQuery({
    queryKey: ["reseller-client"],
    queryFn: () => getResellerClient(),
    placeholderData: keepPreviousData,
    retry: 0,
  });

  useEffect(() => {
    setCurrentPage(currentPage);
    refetch();
  }, [currentPage]);

  const columns = [
    {
      header: "SL",
      cell: ({ row }: any) => <div className="font-bold">{row.index + 1}</div>,
    },
    {
      header: "Name",
      accessorKey: "name",
    },
    {
      header: "Phone",
      accessorKey: "phone",
    },
    {
      header: "package",
      accessorKey: "package",
      cell: ({ row }: any) => {
        const packages = row.original;
        return <p className="line-clamp-1">{packages?.package?.name}</p>;
      },
    },
    {
      header: "network",
      accessorKey: "network",
      cell: ({ row }: any) => {
        const client = row.original;
        return <p className="line-clamp-1">{client?.network?.name}</p>;
      },
    },
    {
      header: "zone",
      accessorKey: "zone",
      cell: ({ row }: any) => {
        const client = row.original;
        return <p className="line-clamp-1">{client?.zone?.name}</p>;
      },
    },
    {
      header: "Status",
      accessorKey: "status",
      cell: ({ row }: any) => {
        const client = row.original;
        const status_color =
          client?.status === 1 ? "text-green-500" : "text-red-500";
        return (
          <p className={status_color}>
            {client?.status === 1 ? "Active" : "Inactive"}
          </p>
        );
      },
    },
  ];

  return (
    <>
      {(isLoading || isFetching) && (
        <div className="relative">
          <div className="grid fixed left-2/4 top-1/2 z-50">
            <Spinner size="xl" color="purple" />
          </div>
        </div>
      )}
      {clients !== undefined && (
        <div className="user-list pb-20 shadow-md">
          <div className="border-b">
            <DataTable data={clients} columns={columns} />
          </div>
          <CustomPagination
            pagination={pagination}
            currentPage={currentPage}
            onPageChange={onPageChange}
            keys={`reseller-clients`}
          />
        </div>
      )}
    </>
  );
};
export default ResellerClient;