import ContentCard from "@/components/ContentCard";
import { Skeleton } from "@/components/ui/skeleton";
import { useGlobal } from "@/context/global";
import { ConvertJSONToFormData, ServerRequest } from "@/lib/actions";
import { fetchVersions } from "@/services/versions";
import { useCallback, useEffect, useState } from "react";
import Last from "./_last";

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

  const [lastVersion, setLastVersion] = useState<LastVersion>("loading");

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

    const result = await ServerRequest<LastVersion>(fetchVersions(formData));

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

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

  useEffect(() => {
    handleFetchLastVersion();

    return () => {
      setLastVersion("loading");
    };
  }, []);

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