import { Button, ButtonComponent, Context, makeButton } from "./button.ts";
import { makeLeftStatusBar } from "./statusBar.ts";
import { takeStores } from "../scrapbox-userscript-std/dom.ts";
import type { Scrapbox } from "../scrapbox-jp%2Ftypes/userscript.ts";
declare const scrapbox: Scrapbox;
export type { Button, Context };

let animationId: number | undefined;
/** 現在登録されているボタンの描画情報 */
const buttons = new Set<ButtonComponent>();
const { cursor, selection } = takeStores();
const statusBar = makeLeftStatusBar();

/** 全てのボタンを削除する
 *
 * @param [context] ここに指定されたページの種類で表示するボタンのみ削除する。何も指定しないときは全てのボタンを削除する
 */
export const removeAllButtons = (context?: Context): void => {
  if (!context) {
    statusBar.textContent = "";
    buttons.clear();
    return;
  }
  for (const button of buttons) {
    if (button.context !== context) continue;
    button.status.remove();
    buttons.delete(button);
  }
};

/** ボタンを追加する
 *
 * @param init ボタンの設定
 * @return 削除用函数
 */
export const addButton = (init: Button): () => void => {
  const button = makeButton(init);
  buttons.add(button);
  statusBar.append(button.status);
  return () => {
    button.status.remove();
    buttons.delete(button);
  };
};

// カーソル位置と選択範囲の変化で描画し直す
const update = () => {
  for (const { update } of buttons) {
    update();
  }
};

cursor.addChangeListener(() => update());
selection.addChangeListener(() => update());
scrapbox.addListener("layout:changed", update);