import { MenuEntry } from "@islands/KMenu/types.ts";
import { TMDBMovie } from "@lib/types.ts";
import { debounce } from "@lib/helpers.ts";
import { Movie } from "@lib/resource/movies.ts";
import { getCookie } from "@lib/string.ts";

export const createNewMovie: MenuEntry = {
  title: "Create new movie",
  meta: "",
  icon: "IconSquareRoundedPlus",
  cb: (state) => {
    state.menus["input_link"] = {
      title: "Search",
      entries: [],
    };

    state.menus["loading"] = {
      title: "Search",
      entries: [
        {
          title: "Loading",
          icon: "IconLoader2",
          cb() {
          },
        },
      ],
    };

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

    let currentQuery: string;
    const search = debounce(async function search(query: string) {
      currentQuery = query;
      console.log({ query });
      if (query.length < 2) {
        return;
      }

      const response = await fetch("/api/tmdb/query?q=" + query);

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

      if (query !== currentQuery) return;

      state.menus["input_link"] = {
        title: "Search",
        entries: movies.map((r) => {
          return {
            title: `${r.title} - ${r.release_date}`,
            cb: async () => {
              state.activeState.value = "loading";
              const response = await fetch("/api/movies/" + r.id, {
                method: "POST",
              });
              const movie = await response.json() as Movie;
              unsub();
              window.location.href = "/movies/" + movie.name;
            },
          };
        }),
      };
      state.activeMenu.value = "input_link";
    }, 500);

    const unsub = state.commandInput.subscribe((value) => {
      state.activeMenu.value = "loading";
      search(value);
    });
  },
  visible: () => {
    if (!getCookie("session_cookie")) return false;
    return true;
  },
};