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

type Dots = [boolean, boolean, boolean, boolean];

function timeChanged(oldvalue: Dots, newvalue: Dots): boolean {
  if (!newvalue) {
    return true;
  }
  return !oldvalue.reduce((acc, t, idx) => acc && t === newvalue[idx], true);
}

@customElement("domino-face")
export class DominoClockface extends LitElement {
  @property({ type: Array, hasChanged: timeChanged }) time = [false, false, false, false];

  static styles = css`
    :host {
      --dominoclock-default-dot-size: 1rem;
      --dominoclock-default-dot-color: #2f4f4f;
      --dominoclock-default-face-size: 5rem;
      --dominoclock-default-background-color: #daaf20;
      --dominoclock-default-border-radius: 0.5rem;
    }

    .face {
      position: relative;
      width: var(--dominoclock-face-size, var(--dominoclock-default-face-size, 5rem));
      height: var(--dominoclock-face-size, var(--dominoclock-default-face-size, 5rem));
      background-color: var(
        --dominoclock-background-color,
        var(--dominoclock-default-background-color, #daaf20)
      );
      border: 1px solid #282828;
      border-radius: var(--dominoclock-border-radius, var(--dominoclock-default-border-radius, 0.5rem));
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }

    .dot {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center center;
    }

    .dot > div {
      transition: opacity 0.3s ease;
      width: var(--dominoclock-date-size, var(--dominoclock-default-date-size, 1rem));
      height: var(--dominoclock-date-size, var(--dominoclock-default-date-size, 1rem));
      background-color: var(--dominoclock-dot-color, var(--dominoclock-default-dot-color, #2f4f4f));
      border-radius: calc(var(--dominoclock-dot-size, var(--dominoclock-default-dot-size, 1rem)) / 2);
      opacity: 0;
    }

    .dot.active > div {
      opacity: 1;
    }
  `;

  render() {
    return html`<div class="face">
      ${this.time.map(pos =>
        pos ? html`<div class="dot active"><div></div></div>` : html`<div class="dot"><div></div></div>`
      )}
    </div>`;
  }
}

export default DominoClockface;