import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { FC, useId } from "react";
import MikrotikGraphSkeleton from "../skeleton/mikrotik-graph";

type props = {
  clientId: string;
  setGraph?: (x: any) => void
};

const ClientGraph: FC<props> = ({ clientId, setGraph = () => { } }) => {
  const randomId = useId();

  const getClientGraph = async () => {
    const data: any = await axios.get(`/api/clients/${clientId}/?period=all`);
    // console.log(data);
    // if (!data?.error?.success) {
    //   toast.error(useParseError(data));
    // }
    const graph = data?.data?.data;
    setGraph(graph)
    return graph;
  };

  let { data: graph, isLoading }: any = useQuery({
    queryKey: [randomId],
    queryFn: getClientGraph,
    retry: 0,
    refetchInterval: 1000,
  });

  const base64decodeImage = (graph: any, period: string) => {
    return `data:${graph["time"]}:image/gif;base64,${graph[period]}`;
  };
  return (
    <>
      <div className="w-full h-auto  bg-white min-h-16 relative dark:bg-gray-800">
        {isLoading && (
          <MikrotikGraphSkeleton />
        )}
        {graph?.message && (
          <div className="py-4 text-red-600 flex justify-center">
            <p>{graph?.message}</p>
          </div>
        )}


        {typeof graph === "string" && graph === "www-port-disabled" && (
          <div className="py-4 text-yellow-500">
            <p>Unable to show client graph!</p>
            <p className="text-red-600">www pot is disabled</p>
            <p>Please goto service and enable www port </p>
          </div>
        )}
        {typeof graph === "object" && graph && (
          <div className="flex justify-center">
            <div className="pb-8 block">
              <div className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-4 sm:grid-cols-2">
                <div className="daily bp-2">
                  <p className="text-center py-2">Daily Graph</p>
                  <img
                    src={base64decodeImage(graph, "daily")}
                    alt={`Daily Graph ${graph["time"]}`}
                  />
                </div>
                <div className="daily  pb-2">
                  <p className="text-center py-2">Weekly Graph</p>
                  <img
                    src={base64decodeImage(graph, "weekly")}
                    alt={`Weekly Graph ${graph["time"]}`}
                  />
                </div>
                <div className="daily">
                  <p className="text-center py-2">Monthly Graph</p>
                  <img
                    src={base64decodeImage(graph, "monthly")}
                    alt={`Monthly Graph ${graph["time"]}`}
                  />
                </div>
                <div className="daily">
                  <p className="text-center py-2">Yearly Graph</p>
                  <img
                    src={base64decodeImage(graph, "yearly")}
                    alt={`Yearly Graph ${graph["time"]}`}
                  />
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
};

export default ClientGraph;