import { bootstrap, Component, fdValue, createComponent, createRouter, Router, fdFor, fdIf } from 'faster-dom';

class Counter extends Component {
  reactive = {
    counter: fdValue(0)
  }

  template = {
    tag: "span",
    textValue: this.reactive.counter,
    listeners: {
      click: () => {
        this.reactive.counter.value++
      }
    }
  }
}

class HelloWorld extends Component {
  template = {
    tag: "span",
    textValue: "HelloWorld"
  }
}

function createHelloWolrd() {
  return createComponent(HelloWorld)
}

function createCounter() {
  return createComponent(Counter)
}

bootstrap('#first', () => {
  const list = [
    {
      name: 'Hello',
      path: '/',
      click: () => {
        Router.goToUrl('/')
      }
    },
    {
      name: 'Counter',
      path: '/counter',
      click: () => {
        Router.goToUrl('/counter')
      }
    },
  ]
  return {
    tag: "div",
    children: [
      fdFor(list, (item) => {
        return {
          tag: "button",
          textValue: item.name,
          listeners: {
            click: () => item.click()
          }
        }
      }, [(e: any) => e]),
      createRouter({
        '/': {
          component: createHelloWolrd,
          title: "Hello Wolrd",
        },
        '/counter': {
          component: createCounter,
          title: "Counter",
        }
      })
    ]
  }
})