/* eslint no-console:0 */

import { createForm } from '../index';
import { regionStyle } from './styles';

let uuid = 0;

const Form = {
  props: {
    form: Object,
  },
  methods: {
    remove(k) {
      const { form } = this;
      // can use data-binding to get
      let keys = form.getFieldValue('keys');
      keys = keys.filter(key => {
        return key !== k;
      });
      // can use data-binding to set
      form.setFieldsValue({
        keys,
      });
    },
    add() {
      uuid++;
      const { form } = this;
      // can use data-binding to get
      let keys = form.getFieldValue('keys');
      keys = keys.concat(uuid);
      // can use data-binding to set
      // important! notify form to detect changes
      form.setFieldsValue({
        keys,
      });
    },
    submit(e) {
      e.preventDefault();
      console.log(this.form.getFieldsValue());
    },
  },

  render() {
    const { getFieldProps, getFieldValue } = this.form;
    getFieldProps('keys', {
      initialValue: [],
    });
    const inputs = getFieldValue('keys').map(k => {
      return (
        <div key={k} style={regionStyle}>
          <input {...getFieldProps(`name${k}`)} />
          <a onClick={this.remove.bind(this, k)}>delete</a>
        </div>
      );
    });
    return (
      <div>
        {inputs}
        <div style={regionStyle}>
          <button onClick={this.submit}>submit</button>

          <button onClick={this.add}>add</button>
        </div>
      </div>
    );
  },
};

export default createForm()(Form);