import { Component, h, Prop, Method } from '@stencil/core';
import { InputTypes, InputValidateOn } from '../../utils/types';

export interface SCUFormControl {
  validate: () => any;
  name: string;
  value: string;
}

@Component({
  tag: 'scu-input',
  styleUrl: 'scu-input.scss',
  shadow: true
})

export class SCUInput implements SCUFormControl {
  
  input: HTMLInputElement;

  // tells scu-form it is a usable form element
  @Prop({ reflect: true }) isFormElement: boolean = true;

  @Prop({ reflect: true }) name: string;
  // @Prop({ reflect: true }) title: string; // researved...
  @Prop({ reflect: true }) type: InputTypes = InputTypes.text;
  @Prop({ reflect: true }) value: string;

  @Prop({ reflect: true }) valid: boolean = true;
  @Prop({ reflect: true }) touched: boolean = false;
  @Prop({ reflect: true }) focused: boolean = false;
  @Prop({ reflect: true }) disabled: boolean = false;

  
  // Native Constraint Validation
  // https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
  @Prop({ reflect: true }) min: number;// rangeUnderflow
  @Prop({ reflect: true }) max: number;// rangeOverflow
  @Prop({ reflect: true }) minlength: number;// tooShort
  @Prop({ reflect: true }) maxlength: number;// tooLong
  @Prop({ reflect: true }) required: boolean;// valueMissing
  @Prop({ reflect: true }) pattern: string;// patternMismatch
  @Prop({ reflect: true }) step: string;// stepMismatch

  // setCustomValidity...access for more complex validation.
  // checkValidity (boolean) or reportValidity (errors[])

  // https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
  // this.input.validity

  // https://www.accessibility-developer-guide.com/examples/forms/validation-messages/
  // examples of error message placements

  @Prop({ reflect: true }) validateOn: InputValidateOn = InputValidateOn.blur;

  @Prop() autocapitalize: string;
  @Prop() autocorrect: string;
  @Prop() autocomplete: string;
  @Prop() autofocus: boolean;

  handleChange(event) {
    console.log(event.target.value);
    this.value = event.target.value;
  }

  @Method()
  async validate() {
    console.log(this.name, this.input.checkValidity(), this.input.reportValidity(), this.input.validity);

    // this.input.setCustomValidity('youre a marco polo');
    return this.input.validity;//true;

    /*
    {
      badInput: false
      customError: false
      patternMismatch: false
      rangeOverflow: false
      rangeUnderflow: false
      stepMismatch: false
      tooLong: false
      tooShort: false
      typeMismatch: false
      valid: true
      valueMissing: false
    }
    */
  }

  render() {

    // this.validationJSON = JSON.parse( this.validation );

    return (
      <div>
        <input 
          ref={el => (this.input = el)}
          class="input"
          type={this.type}
          name={this.name}
          
          disabled={this.disabled}

          min={this.min}
          max={this.max}
          minLength={this.minlength}
          maxLength={this.maxlength}
          required={this.required}
          pattern={this.pattern}
          step={this.step}
          
          autoCapitalize={this.autocapitalize}
          autoComplete={this.autocomplete}
          autoCorrect={this.autocorrect}
          autoFocus={this.autofocus}
          
          onInput={(e) => this.handleChange(e)}
          value={this.value}  />
        <div class="inputFeedback">you're invalid</div>
      </div>
    );
  }
}