import React, { Component } from "react";
import { Row, Col } from "reactstrap";
import Keypad from "../Navigation/keypad";
import gql from "graphql-tag";

export default class Coordinates extends Component {
  constructor(props) {
    super(props);
    this.state = {
      calculatedTarget: props.targeting.calculatedTarget || {},
      selectedField: null,
      enteredTarget: props.targeting.enteredTarget || {}
    };
  }
  componentDidUpdate() {
    if (
      JSON.stringify(this.props.targeting.calculatedTarget) !==
        JSON.stringify(this.state.calculatedTarget) ||
      JSON.stringify(this.props.targeting.enteredTarget) !==
        this.state.enteredTarget
    ) {
      this.setState({
        calculatedTarget: this.props.targeting.calculatedTarget || {},
        enteredTarget: this.props.targeting.enteredTarget || {}
      });
    }
  }
  keydown = e => {
    let key;
    let enteredTarget = Object.assign({}, this.state.enteredTarget);
    let selectedField = this.state.selectedField;
    if (selectedField === null) {
      selectedField = "x";
      enteredTarget = {
        x: "",
        y: "",
        z: ""
      };
    }
    if (e.which) {
    } else {
      key = e.toString();
    }
    if (
      enteredTarget[selectedField] === null ||
      enteredTarget[selectedField] === undefined
    )
      enteredTarget[selectedField] = "";
    if (key === "." && enteredTarget[selectedField].indexOf(".") > -1) return;
    enteredTarget[selectedField] += key;
    this.setState({
      enteredTarget,
      selectedField
    });
  };
  clear = () => {
    const { enteredTarget, selectedField } = this.state;
    if (
      selectedField === null ||
      enteredTarget[selectedField] === null ||
      enteredTarget[selectedField] === ""
    ) {
      this.setState({
        enteredTarget: {},
        selectedField: null
      });
      return;
    }
    enteredTarget[selectedField] = "";
    this.setState({
      enteredTarget
    });
  };
  enter = () => {
    const { enteredTarget, selectedField } = this.state;
    if (selectedField === null) {
      this.setState({
        selectedField: "x"
      });
      return;
    }
    if (
      enteredTarget[selectedField] === null ||
      enteredTarget[selectedField] === ""
    ) {
      return;
    }
    if (
      selectedField === "z" &&
      (enteredTarget[selectedField] !== null &&
        enteredTarget[selectedField] !== "")
    ) {
      this.inputTarget();
      return;
    }
    if (selectedField === "x") {
      this.setState({
        selectedField: "y"
      });
      return;
    }
    if (selectedField === "y") {
      this.setState({
        selectedField: "z"
      });
      return;
    }
  };
  inputTarget = () => {
    const { enteredTarget } = this.state;
    const mutation = gql`
      mutation SetEnteredTarget(
        $id: ID!
        $coordinates: StringCoordinatesInput!
      ) {
        setTargetingEnteredTarget(id: $id, coordinates: $coordinates)
      }
    `;
    const variables = {
      id: this.props.targeting.id,
      coordinates: enteredTarget
    };
    this.props.client.mutate({
      mutation,
      variables
    });
    this.setState({
      selectedField: null
    });
  };

  render() {
    const { enteredTarget, selectedField, calculatedTarget } = this.state;
    return (
      <Row style={{ justifyContent: "space-around" }}>
        <Col style={{ maxWidth: "20vw" }}>
          <h4>Keypad</h4>
          <Keypad
            margin
            keydown={this.keydown}
            clear={this.clear}
            enter={this.enter}
          />
        </Col>
        <Col style={{ maxWidth: "20vw" }}>
          <Row>
            <Col>
              <h4>Calculated Coordinates</h4>
              <div className="coordinate-box">
                X: <div>{calculatedTarget.x || ""}</div>
              </div>
              <div className="coordinate-box">
                Y: <div>{calculatedTarget.y || ""}</div>
              </div>
              <div className="coordinate-box">
                Z: <div>{calculatedTarget.z || ""}</div>
              </div>
            </Col>
          </Row>
          <Row className="current-coordinates">
            <Col>
              <h4>Current Coordinates</h4>
              <div className="coordinate-box">
                X:{" "}
                <div className={`${selectedField === "x" ? "selected" : ""}`}>
                  {enteredTarget.x}
                </div>
              </div>
              <div className="coordinate-box">
                Y:{" "}
                <div className={`${selectedField === "y" ? "selected" : ""}`}>
                  {enteredTarget.y}
                </div>
              </div>
              <div className="coordinate-box">
                Z:{" "}
                <div className={`${selectedField === "z" ? "selected" : ""}`}>
                  {enteredTarget.z}
                </div>
              </div>
            </Col>
          </Row>
        </Col>
      </Row>
    );
  }
}

@@ -149,16 +149,221 @@
 -tag%22;%0A%0A
+function compareCoord(coord1 = %7B%7D, coord2 = %7B%7D) %7B%0A  const %7B x, y, z %7D = coord1 %7C%7C %7B%7D;%0A  const %7B x: x1, y: y1, z: z1 %7D = coord2 %7C%7C %7B%7D;%0A  if (x !== x1 %7C%7C y !== y1 %7C%7C z !== z1) return true;%0A  return false;%0A%7D%0A
 export d
@@ -647,16 +647,25 @@
 dUpdate(
+prevProps
 ) %7B%0A    
@@ -671,39 +671,46 @@
  if (%0A      
-JSON.stringify(
+compareCoord(%0A        
 this.props.t
@@ -726,37 +726,33 @@
 calculatedTarget
-) !==
+,
 %0A        JSON.st
@@ -748,33 +748,27 @@
     
-JSON.stringify(this.state
+prevProps.targeting
 .cal
@@ -780,16 +780,23 @@
 edTarget
+%0A      
 ) %7C%7C%0A   
@@ -802,23 +802,30 @@
     
-JSON.stringify(
+compareCoord(%0A        
 this
@@ -858,13 +858,9 @@
 rget
-) !==
+,
 %0A   
@@ -864,26 +864,35 @@
         
-thi
+prevProp
 s.
-s
 ta
-te
+rgeting
 .entered
@@ -894,24 +894,32 @@
 teredTarget%0A
+      )%0A
     ) %7B%0A    
@@ -2147,26 +2147,120 @@
 tedField%5D = 
-%22%22
+enteredTarget%5BselectedField%5D.slice(%0A      0,%0A      enteredTarget%5BselectedField%5D.length - 1%0A    )
 ;%0A    this.s

Fix coordinate targeting.