// SPDX-License-Identifier: MIT
// Copyright (c) 2024 sup39

document.addEventListener('DOMContentLoaded', () => {
  const params = new URLSearchParams(window.location.search);
  const end = +new Date(params.get('end') ?? +new Date());
  console.log(params.get('end'));

  /** @param {string} selector */
  const queryKnownSelector = selector =>
    /**@type{HTMLElement}*/(document.querySelector(selector));

  const title = params.get('title');
  if (title != null) {
    queryKnownSelector('#title').textContent = title;
  }

  const units = [
    {max: 60, digit: 2, element: queryKnownSelector('#ct-s')},
    {max: 60, digit: 2, element: queryKnownSelector('#ct-m')},
    {max: 24, digit: 2, element: queryKnownSelector('#ct-h')},
    {max: Infinity, digit: 0, element: queryKnownSelector('#ct-d')},
  ];
  const elmSign = queryKnownSelector('#ct-sign');
  let t0 = 0;
  function render() {
    const t = (end - +new Date()) / 1000 | 0;
    if (t !== t0) {
      let val = t;
      const isMinus = val < 0;
      if (isMinus) val = -val;
      elmSign.textContent = isMinus ? '-' : '';
      for (const {max, digit, element} of units) {
        element.textContent = String(val % max).padStart(digit, '0');
        val = val / max | 0;
      }
      // next
      t0 = t;
    }
    requestAnimationFrame(render);
  }
  render();
});