<counter-element></counter-element>

import {html, css, LitElement} from "https://cdn.skypack.dev/lit";
import {customElement, property} from "https://cdn.skypack.dev/lit/decorators.js";

import type { ReactiveController, ReactiveControllerHost } from "https://cdn.skypack.dev/lit";
import * as lit from "https://cdn.skypack.dev/lit@2.1.1";

export type Reducer<T, A> = (state: T, action: A) => T;

export class ReducerController<T = unknown, A = unknown> implements ReactiveController {
  public state: T;

  constructor(
    private host: ReactiveControllerHost,
    public reducer: Reducer<T, A>,
    public initialState: T,
  ) {
    this.host.addController(this);
    this.state = initialState;
  }

  dispatch(action: A): void {
    this.state = this.reducer(this.state, action);
    this.host.requestUpdate();
  }

  hostUpdate?():void
}

@customElement('counter-element')
export class CounterElement extends LitElement {
  static readonly styles = css`
    :host {
      display: grid;
      gap: 5px;
      grid-template-columns: 1fr 1fr 1fr;
      place-items: center center;
      width: max-content;
    }
    button:last-of-type { grid-column: span 3 }
  `;
  
  private count = new ReducerController(this, function reducer(state, action: CountAction) {
    switch (action.type) {
      case 'reset':
        return 0;
      case 'increment':
        return state + 1;
      case 'decrement':
        return state - 1;
    }
  }, 0);

  render() {
    return html`
      <button @click=${() => this.count.dispatch({ type: 'decrement' })}>-</button>
      <output>${this.count.state}</output>
      <button @click=${() => this.count.dispatch({ type: 'increment' })}>+</button>
      <button @click=${() => this.count.dispatch({ type: 'reset' })}>RESET</button>
`;
  }
}