import { getTimePhase } from "./time-weather.js";
import { buildUIDOM } from "./ui-render-dom.js";

const EMOJI_BY_COLOR = ["🐰", "🦌", "🐸", "🦎", "🐢", "🐬", "🦭", "🐟", "🦈", "🐳", "🦅", "🐺", "🐻", "🦊", "🐗"];
const animalEmoji = {};
for (let c = 0; c < 15; c++) {
  for (let r = 0; r < 5; r++) {
    animalEmoji[`c${c}_r${r}`] = EMOJI_BY_COLOR[c] ?? "🐾";
  }
}

/**
 * @param {{ state: import("./types.js").GameState, setState: () => void, getLastHatched: () => Array<{ x: number, y: number }>, onRestart?: () => void, updateState?: (partial: Partial<import("./types.js").GameState>) => void }} opts
 * @returns {object}
 */
function buildRenderSetup(opts) {
  const { state, setState, getLastHatched, onRestart, updateState } = opts;
  const getHatched = getLastHatched ?? (() => []);
  const selected = { x: 1, y: 1 };
  const pendingTokenByEggType = {};
  const selectedTokenIdRef = { current: null };
  const emptyCellChoiceRef = { current: null };
  const errorMsg = { current: "" };
  const lastActionWasDropRef = { current: false };
  const sellZoneJustDroppedRef = { current: false };
  const clampSelection = () => {
    selected.x = Math.max(1, Math.min(state.grid.width, selected.x));
    selected.y = Math.max(1, Math.min(state.grid.height, selected.y));
  };
  const errEl = document.createElement("div");
  errEl.className = "error-msg";
  errEl.hidden = true;
  const setError = (msg) => {
    errorMsg.current = msg;
    if (errEl) {
      errEl.textContent = msg;
      errEl.hidden = !msg;
    }
  };
  return {
    state, setState, getHatched, updateState, onRestart,
    selected, pendingTokenByEggType, selectedTokenIdRef, emptyCellChoiceRef,
    errorMsg, lastActionWasDropRef, sellZoneJustDroppedRef,
    clampSelection, setError, errEl, animalEmoji,
  };
}

/**
 * @param {HTMLElement} root
 * @param {{ state: import("./types.js").GameState, setState: () => void, getLastHatched: () => Array<{ x: number, y: number }>, onRestart?: () => void, updateState?: (partial: Partial<import("./types.js").GameState>) => void }} opts
 * @returns {() => void}
 */
export function render(root, opts) {
  const phase = getTimePhase(opts.state.timeOfDay ?? 6);
  const weather = opts.state.weather || "sun";
  document.body.classList.remove("bg-phase-dawn", "bg-phase-day", "bg-phase-dusk", "bg-phase-night", "bg-weather-sun", "bg-weather-cloudy", "bg-weather-rain");
  document.body.classList.add(`bg-phase-${phase.phase}`, `bg-weather-${weather}`);
  root.innerHTML = "";
  const setup = buildRenderSetup(opts);
  return buildUIDOM(root, setup);
}