import { useApp } from "@/context/app";
import { ServerRequest } from "@/lib/actions";
import { socket } from "@/socket";
import React from "react";
import ReloadButton from "../components/domains/_button";
import { fetchDomainsCount } from "../services/domains";

export function useDomainResume() {
  const { header, setHeader } = useApp();

  const [domains, setDomains] = React.useState<DomainResume>();
  const [isPending, startTransition] = React.useTransition();

  const fetchDomains = async () => {
    setDomains("loading");

    startTransition(async () => {
      const result = await ServerRequest<string[]>(fetchDomainsCount());

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

      setDomains(result.data);
    });
  };

  const checkProjectData = () => {
    if (!domains || !header) return;

    setHeader(() => {
      const newOpt =
        domains === "error" ? (
          <ReloadButton onClick={fetchDomains} />
        ) : undefined;

      if (header?.opt !== newOpt) {
        return {
          ...header,
          opt: newOpt,
        };
      }

      return header;
    });
  };

  React.useEffect(() => {
    if (!domains) return;

    checkProjectData();
  }, [domains]);

  React.useEffect(() => {
    fetchDomains();

    return () => {
      setDomains(undefined);
    };
  }, []);

  const onResumeAddDomain = () => {
    setDomains((prev) => {
      if (!Array.isArray(prev)) return prev;

      const [total, active, inactive] = prev;

      return [
        (parseInt(total) + 1).toString(),
        (parseInt(active) + 1).toString(),
        inactive,
      ];
    });
  };

  const onResumeDeleteDomain = () => {
    setDomains((prev) => {
      if (!Array.isArray(prev)) return prev;

      const [total, active, inactive] = prev;

      return [
        (parseInt(total) - 1).toString(),
        inactive,
        (parseInt(active) - 1).toString(),
      ];
    });
  };

  const onResumeToggleDomainStatus = ({ redirectsTo }: ProjectData) => {
    setDomains((prev) => {
      if (!Array.isArray(prev)) return prev;

      const [total, active, inactive] = prev;

      if (redirectsTo === "not redirected") {
        return [
          total,
          (parseInt(active) + 1).toString(),
          (parseInt(inactive) + 1).toString(),
        ];
      }

      return [
        (parseInt(total) + 1).toString(),
        (parseInt(active) + 1).toString(),
        inactive,
      ];
    });
  };

  React.useEffect(() => {
    if (!Array.isArray(domains)) return;

    socket.on("add-project", onResumeAddDomain);
    socket.on("delete-project", onResumeDeleteDomain);
    socket.on("toggle-project-status", onResumeToggleDomainStatus);

    return () => {
      socket.off("add-project", onResumeAddDomain);
      socket.off("delete-project", onResumeDeleteDomain);
      socket.off("toggle-project-status", onResumeToggleDomainStatus);
    };
  }, [domains]);

  return domains;
}