import * as React from "react";
import { AxisInputBox } from "./axis_input_box";
import { Row, Col } from "../ui/index";
import { AxisInputBoxGroupProps, AxisInputBoxGroupState } from "./interfaces";
import { isNumber } from "lodash";
import { Vector3 } from "farmbot";
import { t } from "../i18next_wrapper";

/** Coordinate input and GO button for Move widget. */
export class AxisInputBoxGroup extends
  React.Component<AxisInputBoxGroupProps, Partial<AxisInputBoxGroupState>> {
  constructor(props: AxisInputBoxGroupProps) {
    super(props);
    this.state = {};
  }

  change = (axis: keyof Vector3, val: number) => {
    this.setState({ [axis]: val });
  }

  get vector() {
    const { x, y, z } = this.state;
    const p = this.props.position;
    const x2 = p.x,
      y2 = p.y,
      z2 = p.z;

    return {
      x: isNumber(x) ? x : (x2 || 0),
      y: isNumber(y) ? y : (y2 || 0),
      z: isNumber(z) ? z : (z2 || 0)
    };
  }

  clicked = () => {
    this.props.onCommit(this.vector);
    this.setState({ x: undefined, y: undefined, z: undefined });
  }

  render() {
    const { x, y, z } = this.state;

    return <Row>
      <AxisInputBox
        onChange={this.change}
        axis={"x"}
        value={x} />
      <AxisInputBox
        onChange={this.change}
        axis={"y"}
        value={y} />
      <AxisInputBox
        onChange={this.change}
        axis={"z"}
        value={z} />
      <Col xs={3}>
        <button
          onClick={this.clicked}
          disabled={this.props.disabled || false}
          title={t("Move to chosen location")}
          className="full-width green go fb-button">
          {t("GO")}
        </button>
      </Col>
    </Row>;
  }
}