import React from 'react';
import {Field} from 'redux-form/immutable';

import contempo from 'contempo';

import {NumberField} from 'ponere';

@contempo(require('./vector.scss'))
export default class Vector extends React.Component {

  static defaultProps = {
    max: [99999, 99999],
    min: [0, 0],
    xLabel: '',
    yLabel: '',
    separatorLabel: 'x',
  }

  render() {
    return <div className="vector control">

      {this.props.label && <label>{this.props.label}</label>}
      <div className="controls">
        <div className="control">
          <Field
            component={NumberField}
            name={`${this.props.input.name}[0]`}
            max={this.props.max[0]}
            min={this.props.min[0]}
          ></Field>
          <p className="aside">{this.props.xLabel}</p>
        </div>
        <div className="separator">{this.props.separatorLabel}</div>
        <div className="control">
          <Field
            component={NumberField}
            name={`${this.props.input.name}[1]`}
            max={this.props.max[1]}
            min={this.props.min[1]}
          ></Field>
          <p className="aside">{this.props.yLabel}</p>
        </div>
      </div>
    </div>;
  }
}