import { useApp } from "@/context/app";
import { useGlobal } from "@/context/global";
import { ConvertJSONToFormData, ServerRequest } from "@/lib/actions";
import { ProjectStatusMap } from "@/models/projects/statusMap";
import fetchSubdomainsInfo from "@/services/projects/fetchSubdomainsInfo";
import { socket } from "@/socket";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import SelectedProjectOptions from "../components/_layout/options";

type Data = ProjectData & { notes: DomainNote[] };
export function useHeaderOptions() {
  const { dict } = useGlobal();

  const { setHeader } = useApp();
  const params: { name: string } = useParams();

  const [data, setData] = useState<Data>();

  const fetchData = async () => {
    const formData = ConvertJSONToFormData({
      name: params.name,
    });

    const result = await ServerRequest<Data>(fetchSubdomainsInfo(formData));

    if (!result.operation) {
      return;
    }

    setData(result.data);
  };

  const handleSetHeader = () => {
    setHeader(() => ({
      title: {
        link: "/projects",
        text: dict.pages.general.navigation.projects,
        path: [
          { link: params.name, text: params.name },
          { link: "files", text: dict.pages.general.navigation.files },
        ],
      },
      opt: <SelectedProjectOptions {...{ data, setData, fetchData }} />,
    }));
  };

  useEffect(() => {
    handleSetHeader();

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

  useEffect(() => {
    fetchData();

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

  const onSendProjectToPlatform = ({ name }: ProjectData) => {
    if (name !== params.name) return;

    setData((prev) => {
      if (!prev) return prev;

      return { ...prev, status: ProjectStatusMap.SENDED };
    });
  };

  useEffect(() => {
    if (!data) return;

    socket.on("send-to-platform", onSendProjectToPlatform);

    return () => {
      socket.off("send-to-platform", onSendProjectToPlatform);
    };
  }, [data]);
}