///<reference no-default-lib="true" />
///<reference lib="esnext" />
///<reference lib="dom" />

interface Indicator {
  /** 現在時刻 */
  now: Date;
  
  /** the color of the now indicator */
  present: string;
  
  /** 3時間ごとの目盛りの色 */
  by3: string;
}

const renderIndicator = (init: Indicator) => {
  const nav = document.querySelector("nav.navbar");
  if (!(nav instanceof HTMLElement)) throw Error('"nav.navbar" does not exist.');
  const start = new Date(init.now.getFullYear(), init.now.getMonth(), init.now.getDate());
  const nowPos = (init.now.getTime() - start.getTime()) / (24 * 3600 * 1000);
  const posLeft = (nowPos * 100 - 0.25).toFixed(2);
  const posRight = (nowPos * 100 + 0.25).toFixed(2);
  nav.style.background = `linear-gradient(to right, ${
    posLeft < 0
      ? `${init.now} ${posRight}%, transparent ${posRight}%`
      : posRight > 100
        ? `transparent ${posLeft}%, ${init.present} ${posLeft}%`
        : `transparent ${posLeft}%, ${init.present} ${posLeft}% ${posRight}%, transparent ${posRight}%`
  }), linear-gradient(to right, ${init.by3} 0.20%, transparent 0.20% 12.3%, ${init.by3} 12.3% 12.7%, transparent 12.7% 24.8%, ${init.by3} 24.8% 25.2%, transparent 25.2% 37.3%, ${init.by3} 37.3% 37.7%, transparent 37.7% 49.8%, ${init.by3} 49.8% 50.2%, transparent 50.2% 62.3%, ${init.by3} 62.3% 62.7%, transparent 62.7% 74.8%, ${init.by3} 74.8% 75.2%, transparent 75.2% 87.3%, ${init.by3} 87.3% 87.7%, transparent 87.7% 99.8%, ${init.by3} 99.8%), var(--navbar-bg, rgba(53, 59, 72, 0.6))`;
};

let timer: number | undefined;
setInterval(() => {
  if (timer !== undefined) cancelAnimationFrame(timer);
  timer = requestAnimationFrame(() => renderIndicator({
    now: new Date(),
    present: "#ffdd4480",
    by3: "#80808080",
  }));
}, 1000);