"use client";
import { usePermission } from "@/utils/auth/permission";
import getData from "@/utils/fetch";
import { cellIndex, useParseFloat } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { Alert } from "flowbite-react";
import { useSession } from "next-auth/react";
import Link from "next/link";
import { FC, useState } from "react";
import { HiInformationCircle } from "react-icons/hi";
import ActionButton from "../action-button";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import Spinner from "../spinner";
import PackageEdit from "./package-edit";

type props = {
  package_type?: string;
};

const ResellerPackageList: FC<props> = ({ package_type = "my_package" }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pagination, setPagination] = useState<any>({});
  const [isOpen, setOpen] = useState(false);
  const [package_id, setPackageId] = useState<string | null>(null);
  const { data: session }: any = useSession();

  const onPageChange = (page: number) => setCurrentPage(page);
  const getPackages = async () => {
    const type = package_type === "my_package" ? 0 : 1;
    const {
      data: { data },
      data: { pagination },
    } = await getData(`/api/v1/packages?page=${currentPage}&type=${type}`);
    setPagination(pagination);
    return data;
  };
  const {
    data: packages,
    isLoading,
    isError,
    error = {} as any,
  } = useQuery({
    queryKey: ["packages", { currentPage }],
    placeholderData: keepPreviousData,
    queryFn: () => getPackages(),
    retry: 0,
  });

  const columns = [
    {
      header: "SL",
      cell: ({ row }: any) => (
        <div className="font-bold">
          {useParseFloat(cellIndex(row.index, pagination) as any)}
        </div>
      ),
    },
    {
      header: "Package name",
      accessorKey: "name",
    },
    {
      header: "Mikrotik",
      accessorKey: "mikrotik_profile",
    },
    {
      header: "Bandwidth",
      accessorKey: "bandwidth",
    },
    {
      header: package_type === "my_package" ? "Buying Price" : "reseller Price",
      accessorKey: "buying_price",
    },
    {
      header: package_type === "my_package" ? "Package price" : "Buying Price",
      accessorKey: "price",
    },
    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const package_item = row.original;
        const package_id: string = String(package_item.id);
        const [isShow, setShoe] = useState(false);
        return (
          <>
            <div className=" flex">
              <div className="mr-2">
                {usePermission("packages.edit") && (
                  <ActionButton
                    type="edit"
                    onClick={() => {
                      setOpen(true);
                      setPackageId(package_id);
                    }}
                  ></ActionButton>
                )}
              </div>
              {usePermission("packages.show") && session?.user?.reseller_id && (
                <Link
                  href={`/client-packages/view/${package_id}?type=reseller-packages`}
                >
                  <ActionButton className="ml-1" type="view" />
                </Link>
              )}
            </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 && (
        <PackageEdit
          packageId={package_id}
          setOpen={setOpen as () => void}
          isOpen={isOpen}
          type={package_type}
        />
      )}
      {packages !== undefined && (
        <div className="user-list pb-20 shadow-md">
          <div className="border-b overflow-x-auto">
            <DataTable data={packages} columns={columns} />
          </div>
          <CustomPagination
            pagination={pagination}
            currentPage={currentPage}
            onPageChange={onPageChange}
          />
        </div>
      )}
    </>
  );
};
export default ResellerPackageList;