import { DEFAULT_FONT_SIZE, MIN_FONT_SIZE, MAX_FONT_SIZE, FONT_SIZE_KEY, readFontSize, saveFontSize } from './terminal-preferences.js';

const toolbar = document.createElement('header');
toolbar.className = 'terminal-settings';
toolbar.innerHTML = `
  <a href="/">← 看板</a>
  <label for="terminalFontSize">字号</label>
  <button id="smallerFont" type="button" aria-label="减小终端字号">A−</button>
  <select id="terminalFontSize" aria-label="终端字号"></select>
  <button id="largerFont" type="button" aria-label="增大终端字号">A+</button>
  <button id="resetFont" type="button">重置</button>
  <span id="fontSizeStatus" role="status">保存在当前浏览器</span>`;
document.body.prepend(toolbar);

const select = toolbar.querySelector('#terminalFontSize');
const smaller = toolbar.querySelector('#smallerFont');
const larger = toolbar.querySelector('#largerFont');
const status = toolbar.querySelector('#fontSizeStatus');
for (let size = MIN_FONT_SIZE; size <= MAX_FONT_SIZE; size++) {
  select.add(new Option(`${size} px`, String(size)));
}
let fontSize = readFontSize();
let fittedTerminal;

function updateControls() {
  select.value = String(fontSize);
  smaller.disabled = fontSize <= MIN_FONT_SIZE;
  larger.disabled = fontSize >= MAX_FONT_SIZE;
}

function applyFontSize() {
  const term = window.term;
  if (!term) return;
  if (term.options.fontSize !== fontSize || fittedTerminal !== term) {
    term.options.fontSize = fontSize;
    term.fit();
    fittedTerminal = term;
  }
}

function changeFontSize(size) {
  fontSize = size;
  status.textContent = saveFontSize(size) ? '已保存到当前浏览器' : '无法保存设置，仅当前页面生效';
  updateControls();
  applyFontSize();
  window.term?.focus();
}

select.addEventListener('change', () => changeFontSize(Number(select.value)));
smaller.addEventListener('click', () => changeFontSize(Math.max(MIN_FONT_SIZE, fontSize - 1)));
larger.addEventListener('click', () => changeFontSize(Math.min(MAX_FONT_SIZE, fontSize + 1)));
toolbar.querySelector('#resetFont').addEventListener('click', () => changeFontSize(DEFAULT_FONT_SIZE));
window.addEventListener('storage', (event) => {
  if (event.key !== FONT_SIZE_KEY && event.key !== null) return;
  fontSize = readFontSize();
  updateControls();
  applyFontSize();
});
updateControls();
applyFontSize();
// ttyd applies server preferences again on connect/reconnect; restore this browser's choice.
setInterval(applyFontSize, 250);