---
interface Props {
  immutable?: true;
}
---

<script>
  import Powers, { type powerObj } from "../../lib/powers";

  class HTMLPointsMeterElement extends HTMLElement {
    dec: HTMLButtonElement;
    inc: HTMLButtonElement;
    meter: HTMLMeterElement;
    count: HTMLElement;
    max: HTMLElement;

    constructor() {
      super();
      const dec = this.querySelector("button[data-dec]");
      const inc = this.querySelector("button[data-inc]");
      const meter = this.querySelector("meter");
      const count = this.querySelector("span.count");
      const max = this.querySelector("span.max");

      if (
        !(
          dec instanceof HTMLButtonElement &&
          inc instanceof HTMLButtonElement &&
          meter instanceof HTMLMeterElement &&
          count instanceof HTMLElement &&
          max instanceof HTMLElement
        )
      ) {
        throw "Elements not set correctly";
      }

      this.dec = dec;
      this.inc = inc;
      this.meter = meter;
      this.count = count;
      this.max = max;

      Powers.subscribe(this.handleState.bind(this));

      this.dec.addEventListener("click", async () => {
        this.max.innerText = "...";
        this.dec.disabled = true;

        await Powers.setKey("points", Powers.get().points - 1).catch((e) =>
          console.warn(e),
        );

        this.dec.disabled =
          !(Powers.get().points - 1 >= 0) ||
          !(Powers.get().points - 1 >= Powers.get().powers.length) ||
          this.getAttribute("disabled") !== null;
      });

      this.inc.addEventListener("click", async () => {
        this.max.innerText = "...";
        this.inc.disabled = true;
        await Powers.setKey("points", Powers.get().points + 1).catch((e) =>
          console.warn(e),
        );

        this.inc.disabled = this.getAttribute("disabled") !== null;
      });
    }

    handleState(_val: Readonly<powerObj> | null) {
      const val = _val ? _val : { powers: [""], points: 1 };
      this.meter.value = val.powers.length;
      this.meter.max = val.points;
      this.count.innerText = val.powers.length + "";
      this.max.innerText = val.points + "";

      this.dec.disabled =
        !(val.points - 1 >= 0) ||
        !(val.points - 1 >= val.powers.length) ||
        this.getAttribute("disabled") !== null;
    }
  }

  customElements.define("points-meter", HTMLPointsMeterElement);
</script>

<points-meter disabled={Astro.props.immutable}>
  <button aria-label="decrement" data-dec disabled={Astro.props.immutable}
    >-</button
  >
  <meter></meter>
  <span class="total"
    ><span class="count"></span>/<span class="max"></span></span
  >
  <button aria-label="increment" data-inc disabled={Astro.props.immutable}
    >+</button
  >
</points-meter>

<style>
  points-meter {
    background-color: color-mix(
      in oklch,
      100% var(--background),
      10% var(--text)
    );
    border: 5px solid var(--text);
    border-radius: 10px;
    padding: 1em;
    z-index: 99;

    display: grid;
    gap: 1em;
    grid-template: "dec meter inc" 1fr / 1fr 3fr 1fr;
    max-width: 100%;
    width: 400px;

    button {
      background-color: inherit;
      border: 3px solid;
      border-color: inherit;
      border-radius: inherit;

      &[disabled],
      &:active {
        opacity: 0.7;
      }
    }

    .total {
      width: min-content;
      padding: 0.2em 1em;
      margin: auto;
      z-index: 99;

      background: var(--background);
      border: 1px solid;
      border-color: inherit;
      border-radius: 0.5em;
    }

    meter {
      appearance: none;
      width: 100%;
      height: 3rem;
      background: var(--background);
      border-radius: 10px;
      overflow: clip;

      &::-webkit-meter-bar {
        background: inherit;
        height: 3rem;
      }

      &::-moz-meter-bar {
        background: var(--green);
      }

      &::-webkit-meter-optimum-value {
        background: var(--green);
        height: 100%;
      }
    }

    button[data-dec] {
      grid-area: dec;
    }

    button[data-inc] {
      grid-area: inc;
    }

    meter,
    .total {
      grid-area: meter;
    }
  }
</style>