import { Menu } from "@islands/KMenu/types.ts";
import { Movie } from "@lib/resource/movies.ts";
import { TMDBMovie } from "@lib/types.ts";
import { isValidUrl } from "@lib/helpers.ts";

export const menus: Record<string, Menu> = {
  main: {
    title: "Run",
    entries: [
      {
        title: "Close menu",
        meta: "",
        cb: (state) => {
          state.visible.value = false;
        },
        visible: () => false,
      },
      {
        title: "Create new article",
        meta: "",
        icon: "IconSquareRoundedPlus",
        cb: (state) => {
          state.menus["input_link"] = {
            title: "Link:",
            entries: [],
          };

          state.activeMenu.value = "input_link";
          state.activeState.value = "input";

          const unsub = state.commandInput.subscribe(async (value) => {
            if (isValidUrl(value)) {
              unsub();

              state.activeState.value = "loading";

              const response = await fetch("/api/articles/create?url=" + value);
              const newArticle = await response.json();

              if (newArticle?.id) {
                window.location.href = "/articles/" + newArticle.id;
              }

              state.visible.value = false;
            }
          });
        },
        visible: () => true,
      },
      {
        title: "Clear Cache",
        icon: "IconRefresh",
        cb: async (state) => {
          state.activeState.value = "loading";
          await fetch("/api/cache", {
            method: "DELETE",
          });
          state.activeState.value = "normal";
          state.visible.value = false;
        },
      },
      {
        title: "Add Movie infos",
        meta: "",
        icon: "IconReportSearch",
        cb: async (state, context) => {
          state.activeState.value = "loading";
          const movie = context as Movie;

          const query = movie.name;

          const response = await fetch(
            `/api/tmdb/query?q=${encodeURIComponent(query)}`,
          );

          const json = await response.json() as TMDBMovie[];

          const menuID = `result/${movie.name}`;

          state.menus[menuID] = {
            title: "Select",
            entries: json.map((m) => ({
              title: `${m.title} released ${m.release_date}`,
              cb: async () => {
                state.activeState.value = "loading";
                await fetch(`/api/movies/enhance/${movie.name}/`, {
                  method: "POST",
                  body: JSON.stringify({ tmdbId: m.id }),
                });
                state.visible.value = false;
                state.activeState.value = "normal";
                window.location.reload();
              },
            })),
          };

          state.activeMenu.value = menuID;

          state.activeState.value = "normal";
        },
        visible: () => {
          const loc = globalThis["location"];
          return loc?.pathname?.includes("movie");
        },
      },
      {
        title: "Reload Page",
        meta: "",
        cb: () => {
          window.location.reload();
        },
        visible: () => false,
      },
    ],
  },
};