<div id="app" class="clock"></div>
<a href="https://github.com/WebReflection/uland#readme">Link to µland</a>

<script type="module">
  import { Component, render, html, useState, useEffect } from 'https://cdn.esm.sh/v15/uland@0.6.3/esnext/uland.js';

  const Counter = Component((initialState) => {
    const [count, setCount] = useState(initialState);
    return html`
  <button onclick=${() => setCount(count + 1)}>
    Count: ${count}
  </button>`;
  });

  const TextInput = Component((text) => {
    const [name, setName] = useState("");
    const updateName = (event) => {
      setName(event.target.value);
    };
    const clearName = () => {
      setName('');
      document.querySelector('#textinput').value = '';
    };
    const fillName = () => {
      setName(text);
      document.querySelector('#textinput').value = text;
    };
    return html`
  <input id="textinput" type="text" value=${name} onInput=${updateName} placeholder="Reactive input" />
  <p>${name}</p>
  <button onclick=${clearName}>Clear</button>
  <button onclick=${fillName}>${text}</button>
  `;
  })

  const Wrapper = Component((props) => {
    const styles = "color: red;"
    return html`
  <p>This is above</p>
  <p>${props}</p>
  <p style="${styles}">This is below</p>`;
  })

  const Clock = Component(() => {
    const [time, setTime] = useState();
    useEffect(() => {
      setInterval(() => {
        setTime(useState.time = new Date().toLocaleTimeString())
      }, 1000);
    })
    return html`
  <strong>The time is:</strong> <span>${time}</span>`;
  })

  const CounterDisplay = Component(() => {
    let [counter, setCounter] = useState(0);

    const incCounter = () => {
      setCounter(counter => counter + 1);
    };

    useEffect(() => {
      setInterval(() => {
        incCounter();
      }, 200);
    }, []);

    return html`
      <div className="App">
        <h1>${counter}</h1>
        <button onClick=${incCounter}>Inc</button>
      </div>
    `;
  });

  render(document.querySelector('#app'), () => html`
  <div>
    ${Clock()}
    ${Wrapper("Hello")} <hr>
    Some counters.
    ${Counter(0)} ${Counter(1)}
    <br>
    ${TextInput('something')}
    ${CounterDisplay()}
  </div>
`);
</script>