import { ART_DIRECTIONS, directionTheme } from './art-directions.js';
import { drawScene, CanvasPainter } from './renderer.js';
import { layout } from './geometry.js';
import { createStudyLevel } from './study-levels.js';
import { TILE_ATLAS } from './sprites.js';

const level = createStudyLevel(3), atlas = new Image();
const themes = ART_DIRECTIONS[0].themes;
const requestedTheme = new URL(location.href).searchParams.get('theme');
let themeId = themes.some(t => t.id === requestedTheme) ? requestedTheme : themes[0].id;

function paint() {
  for (const direction of ART_DIRECTIONS) {
    const canvas = document.querySelector(`[data-catalog-design="${direction.id}"]`);
    const theme = directionTheme(direction, themeId), painter = new CanvasPainter(canvas.getContext('2d'));
    painter.atlas = atlas;
    painter.ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawScene(painter, level, level.tiles, layout(level.cells, canvas.width, canvas.height), { theme });
    canvas.setAttribute('aria-label', `${direction.name} · ${theme.label}主题棋盘`);
    const preview = canvas.closest('.card-preview');
    preview.style.background = theme.background;
    preview.style.color = theme.ink;
    preview.querySelector('.preview-theme').textContent = theme.name;
    document.querySelector(`[data-review-design="${direction.id}"]`).href = `../design-showcase.html?design=${direction.id}&theme=${themeId}#phone`;
  }
  document.querySelectorAll('[data-theme]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.theme === themeId)));
  document.querySelector('#comparison-status').textContent = `当前对比：${themes.find(t => t.id === themeId).label} · ${ART_DIRECTIONS.length} 套设计`;
}

document.querySelectorAll('[data-theme]').forEach(button => button.addEventListener('click', () => {
  themeId = button.dataset.theme;
  const url = new URL(location.href);
  url.searchParams.set('theme', themeId);
  history.replaceState(null, '', url);
  paint();
}));
atlas.onload = paint;
atlas.src = '../' + TILE_ATLAS;
paint();