import { WORLDSHAPER_THEME_PRESETS } from "./themePresets";
import {
  WORLDSHAPER_STUDIO_MARKUP_SHELL,
  WORLDSHAPER_STUDIO_MARKUP_SIDEBAR,
  WORLDSHAPER_STUDIO_MARKUP_STAGE,
} from "./domMarkupSections";

export function buildWorldshaperStudioPopupMarkup(): string {
  const themePresetButtons = WORLDSHAPER_THEME_PRESETS.map((preset) => `
        <button
          class="theme-preset-btn"
          data-theme-preset="${preset.id}"
          type="button"
          title="${preset.label} theme"
          aria-label="Switch to ${preset.label} theme"
        >
          <span
            class="theme-preset-swatch"
            style="--theme-swatch-a:${preset.swatch[0]}; --theme-swatch-b:${preset.swatch[1]}; --theme-swatch-c:${preset.swatch[2]}; --theme-swatch-d:${preset.swatch[3]};"
          ></span>
        </button>
      `).join("");
  return (
    WORLDSHAPER_STUDIO_MARKUP_SHELL.replace("__THEME_PRESET_BUTTONS__", themePresetButtons)
    + WORLDSHAPER_STUDIO_MARKUP_SIDEBAR
    + WORLDSHAPER_STUDIO_MARKUP_STAGE
  );
}

export function getWorldshaperStudioBodyMarkup(): string {
  return buildWorldshaperStudioPopupMarkup()
    .replace(/^<body>/i, "")
    .replace(/<\/body>\s*$/i, "");
}
