import Button from '../../button';
import Field from '..';
import Input from '../../input';
import React from 'react';
import ReactDOM from 'react-dom';
import Table from '../../table';

class Demo extends React.Component {
  getValues: () => void;
  field: any;
  input: (value: any, index: any) => JSX.Element;
  op: (value: any, index: any) => JSX.Element;
  idx: number;
  constructor(props) {
    super(props);

    this.getValues = () => {
      const values = this.field.getValues();
      console.log(values);
    };
    this.input = (value, index) => (
      <Input {...this.field.init(`name.${index}.input`)} />
    );
    this.op = (value, index) => {
      return (
        <span>
          <Button type="primary" onClick={this.addItem.bind(this, index + 1)}>
            add
          </Button>
          <Button
            warning
            onClick={this.removeItem.bind(this, index)}
            style={{ marginLeft: 4 }}
          >
            delete
          </Button>
        </span>
      );
    };
    this.idx = 3;

    this.field = new Field(this, {
      parseName: true,
      values: {
        name: [ 0, 1, 2, 3 ].map(i => {
          return { id: i, input: i };
        }),
      },
    });
  }

  addItem(index) {
    ++this.idx;
    this.field.addArrayValue('name', index, { id: this.idx, input: this.idx });
  }

  removeItem(index) {
    this.field.deleteArrayValue('name', index);
  }

  render() {
    const dataSource = this.field.getValue('name');
    return (
      <div>
        <Table dataSource={dataSource}>
          <Table.Column title="id" dataIndex="id" />
          <Table.Column title="input" dataIndex="id" cell={this.input} />
          <Table.Column title="operation" cell={this.op} width={150} />
        </Table>
        <pre style={{ marginTop: 8 }}>
          {JSON.stringify(dataSource, null, 2)}
        </pre>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('field-demo-8'));