const appEl = document.querySelector('#app');

function App({ node }) {
  const initalState = {
    count: 0,
    onClick: () => {
      const { count } = this.state

      this.setState({
        ...this.state,
        count: count + 1
      });
    }
  };
  this.state = initalState
  
  this.setState = newState => {
    this.state = {
      ...this.state,
      ...newState
    }
    
    TitleComponent.setState(newState);
  }
  
  const ButtonComponent = new ButtonEl({ node, initalState });
  const TitleComponent = new TitleEl({ node, initalState });
};

new App({ node: appEl });

function TitleEl({ node, initalState }) {
  this.state = initalState;
  const h1El = document.createElement('h1');
  
  this.setState = newState => {
    this.state = {
      ...this.state,
      ...newState
    }
    
    this.render();
  }
  
  this.render = () => {
    h1El.textContent = `Count: ${this.state.count}`;
  }
  
  this.init = () => {
    node.appendChild(h1El);
    this.render();
  }
  
  this.init();
}

function ButtonEl({ node, initalState }) {
  this.state = initalState;
  
  this.init = () => {
    const btnEl = document.createElement('button');
    btnEl.textContent = `Count + 1`;
    btnEl.addEventListener('click', () => {
      this.state.onClick();
    });

    node.appendChild(btnEl);
  }
  
  this.init();
}