"use client";
import { usePermission } from "@/utils/auth/permission";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Spinner, Tabs } from "flowbite-react";
import dynamic from "next/dynamic";
import { FC, useId } from "react";
import { BsBoxes } from "react-icons/bs";
import { HiUser } from "react-icons/hi";
import { MdEditSquare } from "react-icons/md";
import { TbUsersGroup } from "react-icons/tb";
import PageHeader from "../PageHeder";
import ActionButton from "../action-button";
import { TSresellerSchema } from "../forms/schema/reseller";
import ResellerBasicView from "./basic-view";
import ResellerPackage from "./reseller-package";
const ResellerClient = dynamic(() => import("./Reseller-client"));

type props = {
  resellerId: string | null;
};
const ResellerView: FC<props> = ({ resellerId }) => {
  const randomId = useId();
  const editPermission = usePermission("resellers.edit");

  const getReseller = async () => {
    const { data } = await axios.get(`/api/resellers/${resellerId}`);
    return data?.data as TSresellerSchema;
  };

  const { data: reseller, isLoading } = useQuery({
    queryKey: [randomId],
    queryFn: getReseller,
    retry: 0,
  });
  console.log(reseller);
  return (
    <>
      {isLoading && (
        <div className="flex justify-around">
          <Spinner
            aria-label="Center-aligned spinner flex justify-center"
            className="mt-20"
            size="xl"
          />
        </div>
      )}
      {reseller && (
        <>
          <PageHeader>
            <div className="flex justify-between !p-0">
              <h2 className="text-xl font-semibold">Reseller Details</h2>
              <div className="flex">
                {editPermission && (
                  <ActionButton
                    className="mr-2"
                    type="back"
                    href={`/resellers/edit/${resellerId}`}
                  >
                    <MdEditSquare className="text-lg text-white block mr-2" />{" "}
                    Edit
                  </ActionButton>
                )}
                <ActionButton type="back" href={"/resellers"} />
              </div>
            </div>
          </PageHeader>
          <Tabs aria-label="Tabs with icons dark:text-gray-200" style="default">
            <Tabs.Item
              active
              title="Profile"
              icon={HiUser}
              className="!outline-none !focus:ring-0 !border-transparent !focus:border-transparent !border-none"
            >
              <ResellerBasicView reseller={reseller} />
            </Tabs.Item>
            <Tabs.Item
              title="Package"
              icon={BsBoxes}
              className="!outline-none !focus:ring-0 !border-transparent !focus:border-transparent !border-none"
            >
              <ResellerPackage packages={reseller?.package as any} />
            </Tabs.Item>
            {usePermission("resellers.client") && (
              <Tabs.Item
                title="Client"
                icon={TbUsersGroup}
                className="!outline-none !focus:ring-0 !border-transparent !focus:border-transparent !border-none"
              >
                <ResellerClient resellerId={reseller?.id} />
              </Tabs.Item>
            )}
          </Tabs>
        </>
      )}
    </>
  );
};

export default ResellerView;