import { define } from 'uce';
import { render, html } from 'uhtml';

define("my-counter", {
  init() {
    this.count = 0;
    this.dec = () => {
      this.count--;
      this.render();
    };
    this.inc = () => {
      this.count++;
      this.render();
    };
    this.render();
  },
  render() {
    this.html`
      <button onclick="${this.dec}">-</button>
      <span>${this.count}</span>
      <button onclick="${this.inc}">+</button>
    `;
  }
});

addEventListener(
  'DOMContentLoaded',
  () => {

    // populate the body
    render(document.body, html`
      <my-counter />
      <footer></footer>
    `);

    // fetch project details and populate the footer
    fetch('package.json')
      .then(_ => _.json())
      .then(({description, version}) => {
        render(document.querySelector('footer'), html`
          ${description} v${version}
        `);
      });
  },
  {once: true}
);