import { toTitle } from "../takker99%2Ftakker-scheduler/diary.ts";
import { getPage } from "../scrapbox-userscript-std/rest.ts";
import { getPersonalTimeStatus, PersonalTimeStatus } from "./mod.ts";
import { write, read, listen } from "./storage.ts";
import { makeDashboard } from "./ui.ts";
import { useStatusBar } from "../scrapbox-userscript-std/dom.ts";
import { subDays } from "../date-fns/mod.ts";

const dashboard = makeDashboard();
const viewer = dashboard.shadowRoot!.getElementById("container")!;

const load = async (now: Date): Promise<void> => {
  // 日をまたぐタスクを回収するために、前日の日記ページも取得する
  const results = await Promise.all([
    getPage("takker-memex", toTitle(subDays(now, 1))),
    getPage("takker-memex", toTitle(now)),
  ]);
  if (!results[0].ok || !results[1].ok) return;
  
  const status = getPersonalTimeStatus(
    [...results[0].value.lines.slice(1),
    ...results[1].value.lines.slice(1)],
    now,
  );
  
  write(status);
};

const zero = (n: number): string => `${n}`.padStart(2, "0");
const format = (n: number): string => {
  const m = Math.abs(n);
  const seconds = m % 60;
  const minutes = ((m - seconds) % 3600) / 60;
  const hours = Math.floor(m / 3600);
  
  return `${n < 0 ? "-" : ""}${zero(hours)}h${zero(minutes)}m${zero(seconds)}s`;
};
const hour = (n: number): string => (n / 3600).toFixed(1);

const render = ({ done, todo }: PersonalTimeStatus, now: Date): void => {
  const free = Math.floor((24 - now.getHours()) * 3600 - now.getMinutes() * 60 - now.getSeconds() - todo);
  viewer.textContent = `✅: ${hour(done)}h, ⬜: ${hour(todo)}h, 🆓: ${format(free)}`;
};

const reload = async () => {
  await load(new Date());
  render(read(), new Date());
};
await reload();
dashboard.shadowRoot!.getElementById("reload")!.addEventListener("click", reload);
listen(() => render(read(), new Date()));
setInterval(() => render(read(), new Date()), 1000);