import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import IDUtil from '../../../util/IDUtil';
import TimeInput from './TimeInput';

export default class SelectionSpatialForm extends React.PureComponent {
    constructor(props) {
        super(props);
        this.x = React.createRef();
        this.y = React.createRef();
        this.w = React.createRef();
        this.h = React.createRef();
    }

    onAdd = () => {
        let x = this.x.current.value;
        let y = this.y.current.value;
        let w = this.w.current.value;
        let h = this.h.current.value;

        const selection = Object.assign({}, this.props.selection, {
            rect: {
                x,
                y,
                w,
                h
            }
        });
        this.props.onUpdate(selection);
    };

    onFocus = e => {
        // select all
        e.target.select();
    };

    render() {
        const inputs = ['x', 'y', 'w', 'h'].map(v => (
            <span key={v}>
                <label>{v}</label>
                <input
                    type="number"
                    ref={this[v]}
                    defaultValue={this.props.selection.rect[v]}
                    onFocus={this.onFocus}
                />
            </span>
        ));

        return (
            <div
                className={classNames(
                    IDUtil.cssClassName('selection-spatial-form')
                )}
            >
                {inputs}
                <button className="btn btn-primary" onClick={this.onAdd}>
                    Add
                </button>
            </div>
        );
    }
}

SelectionSpatialForm.propTypes = {
    selection: PropTypes.object.isRequired,
    onUpdate: PropTypes.func.isRequired
};
