import { Component, Method, h } from '@stencil/core';
import { SCUFormControl } from '../scu-input/scu-input';
// GOALS
// make sure screen readers are not sunk
// allow child inputs to control validation specifics
// don't assume much about inputs from form...

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

export class SCUForm {
  form: HTMLFormElement;

  @Method()
  async getFormControls() {
    const slot = this.form.querySelector('slot');
    return slot
      .assignedElements({ flatten: true })
      .reduce((all, ele : any ) => all.concat(ele, [...ele.querySelectorAll('*')]), [])
      .filter(ele => ele.hasAttribute("is-form-element")) as SCUFormControl[];
  }

  @Method()
  async submit() {
    const formControls = await this.getFormControls();
    console.log(formControls);
    const validationArr = [];
    formControls.map((ele) => {
      validationArr.push( ele.validate() );
    });

    return Promise.all(validationArr).then(result => { console.log(result )});
  }

  @Method()
  async data() : Promise<any> {
    const formControls = await this.getFormControls();
    const data = {};
    formControls.map((ele) => {
      console.log(ele.name, ele.value);
      data[ele.name] = ele.value;
    });
    return data;
  }

  @Method()
  async formData() : Promise<FormData> {
    const formControls = await this.getFormControls();
    const formData = new FormData();
    formControls.map((ele) => {
      console.log(ele.name, ele.value);
      // if value is an array then iterate with redundant name...
      formData.append( ele.name, ele.value );// clearly need a decorator....
    });
    return formData;
  }

  render() {
    return (
      <form
        id="me"
        ref={el => (this.form = el)}
        onSubmit={(e) => {
          e.preventDefault();

          console.log(this.form);
          const formData = new FormData(this.form);
          console.log(formData);
          for(var pair of formData.entries()) {
            console.log(pair[0]+ ', '+ pair[1]); 
          } 
          // this.data().then(result => console.log(result));
          return false; 
        }}
        novalidate>
        <slot />
        <scu-button onClick={() => { 
            this.data().then(formData => { 
              for(var pair of formData.entries()) {
                console.log(pair[0]+ ', '+ pair[1]); 
              } 
            })
        }}></scu-button>
        <button type="submit">Submit</button>
        <select name="bob" id="" multiple is-form-element>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </form>
    );
  }
}