import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'wp-input',
  styleUrl: 'input.css',
  shadow: true
})
export class InputComponent {

    @Prop() type: string = 'text';
    @Prop() disabled: boolean = false;
    @Prop() required: boolean = false;
    @Prop() labelTxt: string = '';
    @Prop() class: string = '';
    @Prop() value: string = '';
    @Prop() error: string = '';
    @Prop() id: string;
    @Prop() whenChange: Function;


  render() {
    return  (
        <div class={`wp-input-wrapper`}>
            <label htmlFor={this.id}>{this.labelTxt}</label>
            <input type="text"
                onInput={event => this.whenChange(event)}
                class={`wp-input`} id={this.id}
                value={this.value} required={this.required} />
            {this.error && <div class="error">
                {this.error}
            </div>}
        </div>
    )

  }
}

<script>
    changeFunction = event => {
        console.log(event)
    }
  </script>

  <wp-input
    when-change='changeFunction'
    value='i am here' error='adf' label-txt='Label text'></wp-input>

customElements.whenDefined('wp-input').then( () => {
  var input = document.querySelector("wp-input").shadowRoot.querySelector("input");

  input.addEventListener('keyup', event => {
    console.log(event.target.value)
  });
});