import { Index, onCleanup, onMount } from "solid-js";
import { createSignal } from "solid-js";

const RUNE_COUNT = 9;
const RUNES = Array.from(
  { length: RUNE_COUNT },
  () => String.fromCodePoint(0xe000 + Math.floor(Math.random() * 256)),
);

export function LockRuneCanvas() {
  const [glowIdx, setGlowIdx] = createSignal(-1);

  onMount(() => {
    let timer: ReturnType<typeof setTimeout>;

    function scheduleNext() {
      timer = setTimeout(
        () => {
          setGlowIdx(Math.floor(Math.random() * RUNE_COUNT));
          timer = setTimeout(
            () => {
              setGlowIdx(-1);
              scheduleNext();
            },
            2000 + Math.random() * 1500,
          );
        },
        1500 + Math.random() * 3000,
      );
    }

    scheduleNext();
    onCleanup(() => clearTimeout(timer));
  });

  return (
    <div class="peach-lock-rune-string" aria-hidden="true">
      <Index each={RUNES}>
        {(char, idx) => (
          <span classList={{ "is-glowing": glowIdx() === idx }}>
            {char()}
          </span>
        )}
      </Index>
    </div>
  );
}