import { LitElement, css, html } from "lit";
import { customElement, state } from "lit/decorators.js";
import "./DominoFace.ts";

type Times = number[];
type Cats = Times;
const MATRIX: Cats[] = [
  [1, 5, 8, 9, 11],
  [2, 5, 6, 10, 11],
  [3, 6, 7, 9, 11],
  [4, 7, 8, 10, 11],
];

const tock = (time: number) => [0, 1, 2, 3].map(i => MATRIX[i].includes(time));

@customElement("domino-clock")
export class DominoClock extends LitElement {
  timer: number;

  @state() hour = [false, false, false, false];

  @state() minute = [false, false, false, false];

  @state() second = [false, false, false, false];

  constructor() {
    super();
    this.timer = 0;
    this.paint = this.paint.bind(this);
  }

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

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

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

  static styles = css`
    :host {
      --dominoclock-default-direction: row;
      --dominoclock-default-face-gap: 0.25rem;
    }

    .dominoclock {
      display: flex;
      flex-direction: var(--dominoclock-direction, var(--dominoclock-default-direction, row));
      gap: var(--dominoclock-face-gap, var(--dominoclock-default-face-gap, 0.25rem));
    }
  `;

  render() {
    return html` <div class="dominoclock">
      <domino-face .time=${this.hour}></domino-face>
      <domino-face .time=${this.minute}></domino-face>
      <domino-face .time=${this.second}></domino-face>
    </div>`;
  }
}

export default DominoClock;