"use client";

import {
  useEffect,
  useState,
} from "react";

import {
  getTranslationPages,
} from "../service/translation-service";

import type {
  TranslationModule,
  TranslationPageOption,
} from "../types/translation-types";

export function useTranslationPages(
  module: TranslationModule,
  enabled = true,
) {
  const [pages, setPages] =
    useState<TranslationPageOption[]>([]);

  const [loadingPages, setLoadingPages] =
    useState(false);

  const [pagesError, setPagesError] =
    useState("");

  const [reloadKey, setReloadKey] =
    useState(0);

  useEffect(() => {
    if (!enabled) {
      return;
    }

    let cancelled = false;

    // Run state updates asynchronously so React's
    // set-state-in-effect rule is not triggered.
    const task = window.setTimeout(() => {
      void (async () => {
        if (cancelled) {
          return;
        }

        setLoadingPages(true);
        setPagesError("");

        try {
          const result =
            await getTranslationPages(
              module,
            );

          if (cancelled) {
            return;
          }

          setPages(result);
        } catch (error) {
          if (cancelled) {
            return;
          }

          setPages([]);

          setPagesError(
            error instanceof Error
              ? error.message
              : "Unable to load pages.",
          );
        } finally {
          if (!cancelled) {
            setLoadingPages(false);
          }
        }
      })();
    }, 0);

    return () => {
      cancelled = true;
      window.clearTimeout(task);
    };
  }, [
    enabled,
    module,
    reloadKey,
  ]);

  return {
    pages:
      enabled
        ? pages
        : [],
    loadingPages:
      enabled
        ? loadingPages
        : false,
    pagesError:
      enabled
        ? pagesError
        : "",
    reloadPages: () => {
      setReloadKey(
        (current) =>
          current + 1,
      );
    },
  };
}