type Times = number[];
type Cats = [string, Times];
const MATRIX: Cats[] = [
    ["o0", [1, 5, 8, 9, 11]],
    ["o1", [2, 5, 6, 10, 11]],
    ["o2", [3, 6, 7, 9, 11]],
    ["o3", [4, 7, 8, 10, 11]],
];

const TEMPLATE = `
<style>
   .dominoclock {
      display: flex;
      flex-direction: var(--dominoclock-direction, row);
   }
   .face {
      position: relative;
      width: var(--dominoclock-size, 5rem);
      height: var(--dominoclock-size, 5rem);
      background-color: var(--dominoclock-background, #daaf20);
      border: 1px solid #282828;
      border-radius: var(--domino-clock-borderradius, 0.5rem);

   }

   .face:not(:last-child) {
      margin-right: 0.25rem;
   }

   .dot {
      position: absolute;
      width: var(--dominoclock-dot-size, 1rem);
      height: var(--dominoclock-dot-size, 1rem);
      background-color: var(--dominoclock-dot-color, #2f4f4f);
      transition: opacity 0.3s ease;
      border-radius: calc(var(--dominoclock-dot-size, 1rem) / 2);
      opacity: 0;
   }
   .o0 {
      top: var(--dominoclock-dot-size, 1rem);
      left: var(--dominoclock-dot-size, 1rem);
   }
   .o1 {
      top: var(--dominoclock-dot-size, 1rem);
      left: calc(3 * var(--dominoclock-dot-size, 1rem));
   }
   .o2 {
      top: calc(3 * var(--dominoclock-dot-size, 1rem));
      left: calc(3 * var(--dominoclock-dot-size, 1rem));
   }
   .o3 {
      top: calc(3 * var(--dominoclock-dot-size, 1rem));
      left: var(--dominoclock-dot-size, 1rem);
   }
</style>

<div class="dominoclock">
  <div class="face" id="hours">
	<div class="dot o0" ></div>
	<div class="dot o1" ></div>
	<div class="dot o2" ></div>
	<div class="dot o3" ></div>
  </div>
  <div class="face" id="minutes">
	<div class="dot o0" ></div>
	<div class="dot o1" ></div>
	<div class="dot o2" ></div>
	<div class="dot o3" ></div>
  </div>
  <div class="face" id="seconds">
	<div class="dot o0" ></div>
	<div class="dot o1" ></div>
	<div class="dot o2" ></div>
	<div class="dot o3" ></div>
  </div>
</div>
`;

type Face = "hours" | "minutes" | "seconds";

const isFace = (v: unknown): v is Face => {
    if (typeof v === "string" && ["hours", "minutes", "seconds"].includes(v)) {
        return true;
    }
    throw new Error(`Expected a Face, got ${v}`);
};

class DominoClock extends HTMLElement {
    elements: { [K in Face]: HTMLDivElement };

    timer: number;

    constructor() {
        super();
        this.timer = 0;
        this.innerHTML = TEMPLATE;
        this.elements = Object.fromEntries(
            Array.from(this.getElementsByTagName("div"))
                .filter(element => element.className === "face")
                .map(element => [isFace(element.id) && element.id, element])
        );
        this.paint = this.paint.bind(this);
    }

    connectedCallback() {
        this.timer = window.setTimeout(this.paint, 250);
    }

    disconnectedCallback() {
        window.clearTimeout(this.timer);
    }

    tock(board: Face, time: number) {
        const dots = Array.from(this.elements[board].getElementsByTagName("div"));
        dots.forEach(element => {
            element.style.opacity = "0";
        });
        dots.forEach(element => {
            const row = MATRIX.find(i => Array.from(element.classList).includes(i[0]));
            if (!row) {
                console.log(`Didn't find a row for ${element.className}?`);
                return;
            }
            if (row[1].includes(time)) {
                element.style.opacity = "1";
            }
        });
    }

    paint() {
        const now = new Date();
        const rawHours = now.getHours();
        const hours = rawHours > 12 ? rawHours - 12 : rawHours;
        this.tock("hours", hours);
        this.tock("minutes", Math.floor(now.getUTCMinutes() / 5));
        this.tock("seconds", Math.floor(now.getUTCSeconds() / 5));
        window.clearTimeout(this.timer);
        this.timer = window.setTimeout(this.paint, 250);
    }
}

customElements.define("domino-clock", DominoClock);