// Multi-idioma del contenido: título, subtítulo, texto libre, nota y cada
// línea de materiales guardan un texto por idioma en vez de uno solo, para
// poder editarlos y asociarlos al idioma seleccionado sin perder lo ya
// escrito en los demás.

import { sectionsContainer, languageSelect } from './dom-refs.js';

// Selector común a todo campo traducible: se usa tanto para sincronizar el
// mapa de traducciones en cada pulsación de tecla como para refrescar los
// campos visibles al cambiar de idioma. `textarea` cubre tanto "Texto"
// (.text-input) como "Nota" (.note-input): ambas son un <textarea>.
export const TRANSLATABLE_FIELDS_SELECTOR = '.title-input, .subtitle-input, .material-input, textarea';

// Idioma actualmente seleccionado para el contenido. La estructura de
// secciones (cuáles hay, su orden, su tipo) es la misma para todos los
// idiomas; lo único que cambia es qué texto se muestra en cada campo
// traducible.
let currentLanguage = languageSelect.value;

export function getCurrentLanguage() {
  return currentLanguage;
}

// Cada input/textarea traducible guarda su propio mapa { idioma: texto }
// serializado en el propio elemento (data-translations), así viaja solo
// con guardar/cargar la sección, sin necesidad de un almacén aparte que
// haya que mantener sincronizado.
export function getTranslations(el) {
  try {
    return JSON.parse(el.dataset.translations || '{}');
  } catch {
    return {};
  }
}

// Actualiza, dentro del mapa ya guardado en el elemento, el texto del
// idioma indicado (por defecto el actual), sin tocar el resto de idiomas.
export function setTranslation(el, text, lang = currentLanguage) {
  const translations = getTranslations(el);
  translations[lang] = text;
  el.dataset.translations = JSON.stringify(translations);
}

// Al cambiar el idioma del contenido, se sustituye en cada campo traducible
// (a cualquier nivel de anidamiento) el texto mostrado por el que tenga
// guardado para el nuevo idioma (vacío si aún no se ha escrito nada en ese
// idioma). `onLanguageChange` se llama después, para que quien la registre
// (render.js) pueda repintar la vista previa.
export function setupLanguageSelect(onLanguageChange) {
  languageSelect.addEventListener('change', () => {
    currentLanguage = languageSelect.value;
    sectionsContainer.querySelectorAll(TRANSLATABLE_FIELDS_SELECTOR).forEach(el => {
      el.value = getTranslations(el)[currentLanguage] || '';
    });
    onLanguageChange();
  });
}