import getData from "@/utils/fetch";
import { useQuery } from "@tanstack/react-query";
import { FC } from "react";
import { useInView } from "react-intersection-observer";
import { TSclientSchema } from "../forms/schema/client";
import Spinner from "../spinner";
type Props = {
  client: TSclientSchema;
};

const ClientOnlineStatus: FC<Props> = ({ client }) => {
  const { ref, inView } = useInView({
    threshold: 0,
    triggerOnce: false, // Set to true if you only want to fetch once when it enters viewport
  });

  const { data, isPending } = useQuery<any>({
    queryKey: ["client-online-status", client?.id],
    queryFn: async () => {
      const api_url = `/api/v1/client-online-status/${client?.id}`;
      const { data } = await getData(api_url);
      return data;
    },
    enabled: inView && !!client?.id,
  });


  return (
    <div ref={ref} className="relative">
      {isPending ? (
        <Spinner className="ml-3" />
      ) : (
        <div className={`${client?.status === 1 ? "text-gray-900" : "text-red-500"}`}>
          <div className={`flex gap-0.5 items-center text-sm font-medium`}>
            <div>
              IP:
            </div>
            <div>
              {data?.ip_address ?? 'N/A'}
            </div>
          </div>
          <div className={`flex gap-0.5 items-center text-sm`}>
            <div>
              MAC:
            </div>
            <div>
              {data?.router_mac_address ?? 'N/A'}
            </div>
          </div>
          <div className={`flex gap-0.5 items-center text-sm`}>
            <div>
              UT:
            </div>
            <div>
              {data?.uptime ?? 'N/A'}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ClientOnlineStatus;