import { controller, attr } from '@github/catalyst'


@controller
class TestComponentElement extends HTMLElement {

  @attr testProp: string

  connectedCallback() {
    this.innerHTML = `hello`
    this.setAttribute( 'data-action', 'click:test-component#wasClicked' )
    console.log( this.testProp )  // prints 'undefined' as expected
    this.testProp = 'A'
    console.log( this.testProp ) // prints 'A' as expected
    this.testProp = 'B'
    console.log( this.testProp ) // prints 'B' as expected
  }


  // this is called when clicking the element
  wasClicked( _evt ) {
    console.log( this.testProp ) // prints 'B' as expected (set to this at end of connectedCallback())
    this.testProp = 'C'
    console.log( this.testProp ) // prints 'B' - not expected
    this.testProp = 'D'
    console.log( this.testProp ) // prints 'B' - not expected
    setTimeout( () => {
      console.log( this.testProp ) // prints 'D'
    }, 0 )
  }


}


export default TestComponentElement