import DatePicker from '../../date-picker';
import Field from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import Switch from '../../switch';
import moment from 'moment';
class App extends React.Component {
  field: Field;
  constructor(props) {
    super(props);
    this.field = new Field(this);
  }
  render() {
    const init = this.field.init;

    return (
      <div>
        <Switch
          {...init('switch', {
            getValueFormatter: value => (value ? 1 : 0),
            setValueFormatter: value => value === 1,
          })}
        />
        <br />
        <DatePicker
          {...init('time', {
            getValueFormatter: value => value.format('YYYY-MM-DD'),
            setValueFormatter: value => moment(value, 'YYYY-MM-DD'),
          })}
        />
        <br />
        <pre style={{ marginTop: 8 }}>
          {JSON.stringify(this.field.getValues(), null, 2)}
        </pre>
      </div>
    );
  }
}

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