import { tr, ldoc } from './i18n.js';
import { state } from './state.js';

export function tpl(id) {
  const el = document.getElementById(id).content.cloneNode(true).firstElementChild;
  el.querySelectorAll('[data-t]').forEach(n => { n.textContent = tr(n.dataset.t); });
  el.querySelectorAll('[data-ph]').forEach(n => { n.placeholder = tr(n.dataset.ph); });
  el.querySelectorAll('[data-val]').forEach(n => { n.value = tr(n.dataset.val); });
  return el;
}

export function showToast(msg) {
  const t = document.createElement('div');
  t.className = 'toast';
  t.textContent = msg;
  document.body.appendChild(t);
  setTimeout(() => t.remove(), 3000);
}

const OV_CSS = 'display:flex;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);align-items:flex-end;justify-content:center;animation:fi .2s ease';

export function closeOv() {
  const o = document.getElementById('ov');
  o.style.display = 'none';
  o.innerHTML = '';
}

export function showSheet(content, dismissable) {
  const o = document.getElementById('ov');
  o.style.cssText = OV_CSS;
  const sheet = tpl('tpl-sheet');
  sheet.appendChild(content);
  o.innerHTML = '';
  o.appendChild(sheet);
  o.onclick = dismissable !== false ? e => { if (e.target === o) closeOv(); } : null;
}

export function updateHeader() {
  document.getElementById('tlbl').textContent = state.TODAY.toLocaleDateString(
    ldoc(), { weekday: 'long', day: 'numeric', month: 'long' }
  );
}