import ContentCard from "@/components/ContentCard";
import { Skeleton } from "@/components/ui/skeleton";
import { useGlobal } from "@/context/global";
import { ConvertJSONToFormData, ServerRequest } from "@/lib/actions";
import { fetchDownloadLinks } from "@/services/download/fetchlinks";
import { socket } from "@/socket";
import { useCallback, useEffect, useState } from "react";
import Empty from "./_empty";
import Last from "./_last";

export default function DownloadLinks() {
  const { dict } = useGlobal();

  const [lastLink, setLastLink] = useState<LastLink>("loading");

  const handleFetchDownloadLinks = useCallback(async () => {
    const formData = ConvertJSONToFormData({
      last: true,
    });

    const result = await ServerRequest<LastLink>(fetchDownloadLinks(formData));

    if (!result.operation) {
      setLastLink("error");
      return;
    }

    setLastLink(result.data);
  }, []);

  useEffect(() => {
    handleFetchDownloadLinks();

    socket.on("add-download-link", handleFetchDownloadLinks);
    socket.on("remove-download-link", handleFetchDownloadLinks);

    return () => {
      setLastLink("loading");

      socket.off("add-download-link", handleFetchDownloadLinks);
      socket.off("remove-download-link", handleFetchDownloadLinks);
    };
  }, [handleFetchDownloadLinks]);

  return (
    <ContentCard className="grow basis-1/2">
      <div className="space-y-2">
        <p>{dict.pages.dashboard.downloads.title}</p>
        <div className="flex text-xs">
          {lastLink === "error" ? (
            <p>{dict.pages.dashboard.downloads.error_fetching}</p>
          ) : lastLink === "loading" ? (
            <Skeleton className="h-4 w-full" />
          ) : !lastLink ? (
            <Empty />
          ) : (
            <Last lastLink={lastLink} />
          )}
        </div>
      </div>
    </ContentCard>
  );
}