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

class Comp extends Component {
  reactive = {
    show: fdIf(true),
    text: fdValue("Here timer")
  }

  get show() {
    return this.reactive.show;
  }

  get text() {
    return this.reactive.text
  }

  onClick = () => {
    this.show.value = !this.show.value;
    this.text.value = this.show.value ? "Here timer" : "Sorry not timer"
  }

  template = {
    tag: "div",
    children: [
      {
        tag: "p",
        children: [
          {
            tag: "span",
            textValue: "Current value:"
          },
          {
            tag: "span",
            textValue: this.show
          },
        ]
      },
      {
        tag: "button",
        listeners: {
          click: this.onClick,
        },
        textValue: "Change state"
      },
      {
        tag: "div",
        textValue: "You will see me always"
      },
      {
        tag: "div",
        show: this.show,
        textValue: "You will sometimes"
      }, {
        tag: "div",
        children: [
          {
            tag: "strong",
            textValue: this.text
          },
        ]
      }
    ]
  }
}

function createComp() {
  return createComponent(Comp)
}


bootstrap('#app', createComp)