"use client";
import getData from "@/utils/fetch";
import { useQuery } from "@tanstack/react-query";
import { List, Modal } from "flowbite-react";
import { FC, useState } from "react";
import Button from "../Button";
import { TSpackageSchema } from "../forms/schema/package";
import Spinner from "../spinner";

type props = {
  isOpen?: boolean;
  setOpen?: (x: any) => void;
  package_uuid?: string;
};

const ResellerClientDetails: FC<props> = ({
  isOpen = false,
  setOpen = () => {},
  package_uuid = "",
}) => {
  const [loading, setLoading] = useState(false);
  const [packages, setPackages] = useState<TSpackageSchema[]>([]);
  const getPackageClient = async (id: string | undefined = undefined) => {
    setLoading(true);
    const ID = id ? id : package_uuid;
    const { data } = await getData(`/api/v1/resellers/client/${ID}`);
    setPackages((prev: any) => [...prev, data]);
    setLoading(false);
    return data;
  };
  const {
    data: client_packages,
    isError,
    error = {} as any,
  } = useQuery({
    queryKey: ["resellers-package-client"],
    queryFn: () => getPackageClient(),
    retry: 0,
  });
  const LoadChildren = (uuid: any) => {
    getPackageClient(uuid);
  };
  console.log(packages);
  return (
    <>
      <Modal onClose={() => setOpen(false)} show={isOpen} size="4xl">
        <Modal.Header className="border-b-0 px-6 pb-0 pt-6">
          <span className="sr-only">Delete client</span>
        </Modal.Header>
        <Modal.Body className="px-6 pb-6 pt-0">
          <div className="w-full text-center relative">
            {loading && <Spinner className="absolute" size="lg" />}
            <List className="list-none">
              {packages?.length > 0 &&
                packages.map((item: TSpackageSchema, pindex: number) => (
                  <div key={`${item?.id}${pindex}`}>
                    {item?.children && item?.children?.length > 0 ? (
                      <>
                        {item?.children?.map((child: any, index: number) => (
                          <div
                            key={`${child?.uuid}${pindex}${index}`}
                            className={`if-${pindex}-${index}`}
                          >
                            <div>
                              <List.Item>
                                Package Name: <span>{item?.name}</span>
                              </List.Item>
                              <List.Item>
                                Mikrotik Profile:
                                <span>{item?.mikrotik_profile}</span>
                              </List.Item>
                              <List.Item>
                                Active Client:
                                <span>{item?.active_clients}</span>
                              </List.Item>
                              <List.Item>
                                Inactive Client:
                                <span>{item?.inactive_clients}</span>
                              </List.Item>
                              <List.Item>
                                Price: <span>{item?.buying_price}</span>
                              </List.Item>
                            </div>
                            <div className="flex justify-center">
                              <Button onClick={() => LoadChildren(child?.uuid)}>
                                {child?.reseller?.name} ({item?.name} -{" "}
                                {item?.sl})
                              </Button>
                            </div>
                          </div>
                        ))}
                      </>
                    ) : (
                      <div key={`${item?.id}${pindex}`} className="else">
                        <List.Item>
                          Package Name: <span>{item?.name}</span>
                        </List.Item>
                        <List.Item>
                          Mikrotik Profile:
                          <span>{item?.mikrotik_profile}</span>
                        </List.Item>
                        <List.Item>
                          Active Client: <span>{item?.active_clients}</span>
                        </List.Item>
                        <List.Item>
                          Inactive Client: <span>{item?.inactive_clients}</span>
                        </List.Item>
                        <List.Item>
                          Price: <span>{item?.buying_price}</span>
                        </List.Item>
                        <hr className="mt-3" />
                      </div>
                    )}
                  </div>
                ))}
            </List>
          </div>
        </Modal.Body>
      </Modal>
    </>
  );
};

export default ResellerClientDetails;