'use strict';
const assert = require('node:assert/strict');
const fs = require('node:fs');
const path = require('node:path');
const vm = require('node:vm');
const { createRequire } = require('node:module');
const roots = ['.', 'release/UNIVERSAL_SpineViewer'];
for (const root of roots) {
  const html = fs.readFileSync(path.join(root, 'viewer/spine.html'), 'utf8');
  const css = fs.readFileSync(path.join(root, 'viewer/spine.css'), 'utf8');
  const script = html.match(/<script>([\s\S]*?)<\/script>/)[1];
  new vm.Script(script);
  for (const id of ['groupThumbBtn', 'thumbBtn']) {
    const button = html.match(new RegExp(`<button id="${id}"[^>]*>`))[0];
    assert.match(button, /data-instant-tooltip/);
    assert.match(button, /data-tooltip=/);
    assert.doesNotMatch(button, /\stitle=/);
  }
  assert.match(css, /#groupThumbBtn:hover::after, #thumbBtn:hover::after \{ opacity: 1; visibility: visible; \}/);
  assert.match(css, /#groupThumbBtn \{[^}]*background: #2e7d32;/);
  assert.match(css, /#thumbBtn \{[^}]*background: #1976d2;/);
  assert.match(css, /#groupThumbBtn::after \{[^}]*background: #256628;/);
  assert.match(css, /#thumbBtn::after \{[^}]*background: #155fa8;/);
  assert.match(script, /if \(el\.hasAttribute\('data-instant-tooltip'\)\) el\.dataset\.tooltip = text;/);
  const i18n = script.slice(script.indexOf('\tconst I18N_LANGUAGES'), script.indexOf('\tapplyStaticI18n();'));
  const markers = script.slice(script.indexOf('\tfunction renderKeyframeMarkers('), script.indexOf('\tfunction seekTo('));
  const manifest = JSON.parse(fs.readFileSync(path.join(root, 'manifest.json'), 'utf8'));
  for (const lang of manifest.languages) {
    const table = JSON.parse(fs.readFileSync(path.join(root, '_locales', lang + '.json'), 'utf8'));
    assert.equal(table.viewer.thumbnailTitle, table.viewer.groupThumbnailTitle, `${root}/${lang}: thumbnail button hints must match`);
    if (lang === 'zh_CN') assert.equal(table.viewer.thumbnailTitle, '左键点击生成静态缩略图，右键点击生成动态缩略图');
    for (const match of html.matchAll(/(?:\bt\(['"]|data-i18n(?:-title|-aria-label)?=")([^'"]+)/g)) {
      assert.equal(typeof match[1].split('.').reduce((obj, key) => obj && obj[key], table), 'string', `${root}/${lang}: ${match[1]}`);
    }
    const children = [];
    const context = vm.createContext({
      require: createRequire(path.resolve(root, 'viewer/spine.html')), path, fs,
      // Simulate Eagle supplying a different directory than the HTML page.
      __dirname: path.resolve(root, 'viewer/runtime'), lang, log() {},
      document: { documentElement: {}, createElement: () => ({ style: {}, setAttribute(key, value) { this[key] = value; } }) },
      keyframesEl: { innerHTML: '', appendChild: el => children.push(el) },
      isStaticAnimation: false, duration: 2,
      collectKeyframeTimes: () => [0, 1, 2, 3],
      formatSeconds: value => `${value}s`, frameOf: value => value * 30
    });
    vm.runInContext(i18n + '\n' + markers + '\nrenderKeyframeMarkers({});', context);
    assert.equal(vm.runInContext("t('viewer.skin')", context), table.viewer.skin);
    assert.equal(children.length, 3);
    assert.equal(children[1].style.left, '50%');
    assert.equal(children[1].title, table.viewer.keyframeTitle.replace('{time}', '1s').replace('{frame}', '30'));
    assert.equal(children[1]['aria-label'], children[1].title);
    children.length = 0;
    context.isStaticAnimation = true;
    vm.runInContext('renderKeyframeMarkers({});', context);
    assert.equal(children[0].title, table.viewer.staticPoseTitle);
  }
}
console.log('PASS: source and universal release; eight languages; animated/static keyframe labels and translation keys');