import React, { Component } from 'react';
import { missionControl } from '../../lib/robots';
import { createSurface } from '../../lib/mars';
import { moveMap, rotationMap, compassRotationMap, rotationCompassMap } from '../../lib/robotConfig';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      robots: [],
      result: [],
    }
  }

  getCompStyle() {
    return {
      color: 'green'
    };
  }

  getTextAreaStyle() {
    return {
      color: 'green',
      border: '1px solid green',
      resize: 'none',
      backgroundColor: 'black',
      width: '100%',
      height: 300,
      fontSize: '3rem',
      outline: 'none',
    }
  }

  getButtonStyle() {
    return {
      float: 'right',
      fontSize: '2rem',
      color: 'green',
      backgroundColor: 'black',
      border: '1px solid green',
      marginRight: -5,
      outline: 'none',
      cursor: 'pointer',
    }
  }

  handleChange(evt) {
    const [surfaceDimensions, ...robots] = evt.currentTarget.value.split('\n');

    this.setState({
      surfaceDimensions,
      robots
    });
  }

  handleClick() {
    const [x, y] = this.state.surfaceDimensions.split(' ');
    const surface = createSurface({
      x: parseInt(x, 10),
      y: parseInt(y, 10)
    });

    const control = missionControl({
      moveMap,
      rotationMap,
      compassRotationMap,
      rotationCompassMap,
      surface,
    });

    const mappedRobots = this.state.robots.reduce((robotList, line, indx) => {
      const newList = robotList.slice(0);
      const isPosition = indx % 2 == 0;

      if (isPosition) {
        const [origX, origY, origOrient] = line.split(' ');
        newList.push({
          id: robotList.length + 1,
          origX: parseInt(origX, 10),
          origY: parseInt(origY, 10),
          origOrient,
        });
      } else if (robotList[robotList.length - 1]) {
        robotList[robotList.length - 1].instructions = line;
      }

      return newList;
    }, []);

    const processedRobots = control(mappedRobots);
    const result = Object.keys(processedRobots).map(key => {
      return processedRobots[key];
    });

    this.setState({
      result
    });
  }

  render() {
    return (
      <div style={this.getCompStyle()}>
        <textarea style={this.getTextAreaStyle()} onChange={this.handleChange.bind(this)}></textarea>
        <button style={this.getButtonStyle()} onClick={this.handleClick.bind(this)}>RUN</button>
        <ul>
          {
            this.state.result.map(({ curX, curY, curOrient }) => {
              return (
                <div>{`${curX} ${curY} ${curOrient}`}</div>
              );
            })
          }
        </ul>
      </div>
    );
  }
};

@@ -1873,45 +1873,8 @@
 else
- if (robotList%5BrobotList.length - 1%5D)
  %7B%0A 
@@ -2099,42 +2099,129 @@
     
-return processedRobots%5Bkey%5D;%0A    %7D
+if (key !== 'scent') %7B%0A        return processedRobots%5Bkey%5D%0A      %7D%0A    %7D).filter(robot =%3E robot);%0A%0A    console.log(result
 );%0A%0A
@@ -2592,16 +2592,20 @@
 t.map((%7B
+ id,
  curX, c
@@ -2618,16 +2618,24 @@
 urOrient
+, isLost
  %7D) =%3E %7B
@@ -2653,70 +2653,178 @@
     
-return (%0A                %3Cdiv%3E%7B%60$%7BcurX%7D $%7BcurY%7D $%7BcurOrient%7D%60%7D
+const content = %60$%7BcurX%7D $%7BcurY%7D $%7BcurOrient%7D $%7BisLost ? 'LOST' : ''%7D%60;%0A              return (%0A                %3Cdiv key=%7Bid%7D%3E%0A                  %7Bcontent%7D%0A                
 %3C/di

Tidy output and add LOST