import { html, render } from 'https://cdn.skypack.dev/hacky';

const fetchCat = async (url = 'https://aws.random.cat/meow') => {
  const res = await fetch(url);
  const { file } = await res.json();
  return file;
};

function* Cats({ width, height }) {
  const [cats, setCats] = this.createState([]);
  const [message, setMessage] = this.createState('Fetch cat image');
  const [disabled, setDisabled] = this.createState(false);

  const addCat = async () => {
    setMessage('Fetching...');
    setDisabled(true);

    try {
      const newCat = await fetchCat();
      setCats([...cats(), newCat]);
      setMessage('Fetch cat image');
      setDisabled(false);
    } catch (err) {
      console.error(err);
      setMessage('Failed to fetch. Retrying...');
      setTimeout(() => addCat(), 1000);
    }
  };

  while (true) {
    const catImages = cats().map(
      (cat) => html`<img key=${cat} src=${cat} width=${width} height=${height} />`,
    );
    yield html`
      <button disabled=${disabled()} onClick=${addCat} style="width: 100%">${message()}</button>
      <div>${catImages}</div>
    `;
  }
}

render(html`<${Cats} width=${100} height=${100} />`, document.body);