import { WebComponent } from '../../src/index.js'
import {
  html,
  render as lit,
} from 'https://unpkg.com/lit-html@3.1.0/lit-html.js'

export class LitCounter extends WebComponent {
  static props = {
    count: 123,
  }
  get template() {
    const list = ['a', 'b', 'c', 'what']
    const links = [
      {
        url: 'https://ayco.io',
        text: 'Ayo Ayco',
      },
      {
        url: 'https://ayco.io/gh/McFly',
        text: 'McFly',
      },
    ]

    return html`
      <button
        class="hey"
        id="btn"
        @click=${() => ++this.props.count}
        style="background-color: green; color: white;"
        about="Elephant"
        data-name="thing"
        aria-name="thingz"
      >
        <span>${this.props.count}</span>
      </button>
      <form style="margin: 1em 0;">
        <label data-my-name="Ayo" for="the-input">Name</label>
        <input id="the-input" type="foo" value="Name:" />
      </form>
      ${list.map((item) => html`<p>${item}</p>`)}
      <h3 about="Elephant">Links</h3>
      <ul>
        ${links.map(
          (link) =>
            html`<li><a href=${link.url} target="_blank">${link.text}</a></li>`
        )}
      </ul>
    `
  }
  render() {
    lit(this.template, this)
  }
}

customElements.define('lit-counter', LitCounter)