"use client";
import { FC, useState } from "react";
import ActionButton from "../action-button";
import DataTable from "../dataTable/data-table-fb";
import { TSpackageSchema } from "../forms/schema/package";
import ResellerClientDetails from "./reseller-client-view";

type props = {
  packages?: TSpackageSchema;
};

const ResellerPackage: FC<props> = ({ packages }) => {
  // let base_url = `/api/v1/package-details`;
  // const getResellers = async () => {
  //   const { data } = await getData(base_url, {
  //     data: { package_ids: [3, 4, 7, 8] },
  //   });
  //   return data;
  // };
  // const {
  //   data: pack,
  //   isLoading,
  //   isError,
  //   error = {} as any,
  // } = useQuery({
  //   queryKey: ["package-details"],
  //   queryFn: () => getResellers(),
  //   retry: 0,
  // });

  const columns = [
    {
      header: "SL",
      cell: ({ row }: any) => <div className="font-bold">{row.index + 1}</div>,
    },
    {
      header: "Name",
      accessorKey: "name",
    },
    {
      header: "MikRotik",
      accessorKey: "mikrotik_profile",
    },
    {
      header: "Bandwidth",
      accessorKey: "bandwidth",
    },
    {
      header: "Reseller",
      accessorKey: "reseller",
      cell: ({ row }: any) => {
        const reseller = row.original;
        return (
          <p className="line-clamp-1">
            {reseller?.is_reseller_package === 1 ? "Yes" : "No"}
          </p>
        );
      },
    },
    // {
    //   header: "Creator",
    //   accessorKey: "reseller_creator",
    //   cell: ({ row }: any) => {
    //     const packages = row.original;
    //     return (
    //       <Kbd
    //         className={`capitalize ${packages.package_creator === "reseller" ? "text-green-600" : "text-green-900"}`}
    //       >
    //         {packages?.package_creator}
    //       </Kbd>
    //     );
    //   },
    // },
    {
      header: "Reseller Price",
      accessorKey: "reseller_price",
      cell: ({ row }: any) => {
        const reseller = row.original;
        return <p className="line-clamp-1">{reseller?.buying_price}</p>;
      },
    },
    {
      header: "view",
      cell: ({ row }: any) => {
        const packages = row.original;
        const [isShow, setShow] = useState(false);
        return (
          <>
            <div onClick={() => setShow(true)}>
              <ActionButton type="view" />
            </div>
            {isShow && (
              <ResellerClientDetails
                isOpen={isShow}
                setOpen={setShow}
                package_uuid={packages?.id}
              />
            )}
          </>
        );
      },
    },
  ];

  return (
    <>
      {packages !== undefined && (
        <div className="user-list pb-20 shadow-md">
          <div className="border-b">
            <DataTable data={packages} columns={columns} />
          </div>
        </div>
      )}
    </>
  );
};
export default ResellerPackage;