<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test 'html-tag-js'</title>

    <script src="./dist/Ref.js"></script>
    <script src="./dist/tag.js"></script>
  </head>
  <body>
    <h1>HTML-TAG-JS</h1>
    <div id="app"></div>

    <script>
      const p = new Ref();

      p.onref = () => {
        console.log(p.el.children[0]);
      };

      p.style.display = 'block';
      p.style.color = 'red';
      p.style.width = '100px';
      p.style.height = '100px';

      app.append(
        tag('button', {
          textContent: 'This is a button',
          onclick: () => {
            p.textContent = 'The button was clicked';
          },
        }),
        tag('p', {
          ref: p,
          textContent: 'This is a paragraph',
          attr: {
            data: undefined,
          },
          children: [
            tag('span', {
              textContent: 'This is a span',
            }),
            ['\nThis is a text'],
            ['\nAnother text'],
          ],
        }),
        tag('span', {
          children: [null, undefined, tag.text('This is a span'), tag('br')],
        }),
      );

      app.append(
        tag('div', {
          children: [
            Promise.resolve([
              tag('span', {
                textContent: 'This is a span promise 1',
              }),
              tag('br'),
              tag('span', {
                textContent: 'This is a span promise 2',
              }),
              tag('br'),
              tag('span', {
                textContent: 'This is a span promise 3',
              }),
            ]),
          ],
        }),
      );

      app.append(
        tag('div', {
          children: [
            Promise.resolve(
              tag('span', {
                textContent: 'This is a span promise 4',
              }),
            ),
          ],
        }),
      );

      app.append(
        tag('div', {
          children: [
            [
              tag('span', {
                innerText: 'This is a span\n',
              }),
              [
                tag('span', {
                  innerText: 'This is a span\n',
                }),
                ['This is a text'],
                tag('br'),
                ['Another text'],
              ],
              tag('br'),
              ['This is a text'],
              tag('br'),
              ['Another text'],
            ],
          ],
        }),
      );

      const text = tag.use('text');
      app.append(
        tag('p', {
          children: [
            tag('div', {
              textContent: text,
            }),
            tag('br'),
            ...Array(10000)
              .fill(null)
              .map(() => text),
            tag('button', {
              textContent: 'Click me',
              onclick: () => {
                text.value = 'The button was clicked';
              },
            }),
          ],
        }),
      );

      text.onChange = (value) => {
        console.log(value);
      };

      console.log({ text });

      p.style.backgroundColor = 'blue';

      p.onref = (ref) => {
        console.log(ref);
      };
    </script>
  </body>
</html>