/************************************/
//            Robot COMPONENT       
/************************************/
class Robot extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loadedRobot: {},
      isLoading: false
    };
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log("Robot: shouldComponentUpdate");
    return (
      nextProps.selectedRobotId !== this.props.selectedRobotId ||
      nextState.loadedRobot.id !== this.state.loadedRobot.id ||
      nextState.isLoading !== this.state.isLoading
    );
  }

  componentDidUpdate(prevProps) {
    console.log("Robot: componentDidUpdate");
    if (prevProps.selectedRobotId !== this.props.selectedRobotId) {
      this.fetchData();
    }
  }

  componentDidMount() {
    console.log("Robot: componentDidMount");
    this.fetchData();
  }

  fetchData = () => {
    console.log(
      "http request to get new robot with id " + this.props.selectedRobotId
    );
    this.setState({ isLoading: true });
    fetch(`https://robohash.org/${this.props.selectedRobotId}`, {
      "Content-type": "application/octet-stream"
    })
      .then(response => {
        console.log(response);
        if (response.status !== 200) {
          throw new Error("Could not fetch the Robot");
        }
        return response.blob();
      })
      .then(robot => {
        console.log(window.URL.createObjectURL(robot));
        this.setState({
          isLoading: false,
          loadedRobot: window.URL.createObjectURL(robot)
        });
      })
      .catch(err => console.error(err));
  };
  componentWillUnmount() {
    console.log("Robot: componentWillUnmount");
  }
  render() {
        console.log("Robot: render");
    let content = <p>Loading robot...</p>;
    if (!this.state.isLoading && this.state.loadedRobot) {
      content = (
        <img
          width="150"
          src={this.state.loadedRobot}
          alt=""
          onLoad={function(event) {
            window.URL.revokeObjectURL(event.target.src);
          }}
        />
      );
    } else if (!this.state.isLoading && !this.state.loadedRobot) {
      content = <p>Failed to load robot!!!</p>;
    }

    return <div className="robotContainer">{content}</div>;
  }
}
/************************************/
//     RobotSelector COMPONENT     
/************************************/
class RobotSelector extends React.Component {
  state = { robots: [], isLoading: false };
  componentDidMount() {
    console.log('RobotSelector: componentDidMount');
    this.setState({ isLoading: true });
    fetch("https://swapi.co/api/species")
      .then(response => {
        if (!response.ok) {
          throw new Error("Failed to fetch.");
        }
        return response.json();
      })
      .then(robotData => {
        const selectedRobots = robotData.results.slice(0, 5);
        this.setState({
          robots: selectedRobots.map((robot, index) => ({
            name: robot.name,
            id: index + 1
          })),
          isLoading: false
        });
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {
    console.log('RobotSelector: render');
    let content = <p>Loading Robots...</p>;
    if (
      !this.state.isLoading &&
      this.state.robots &&
      this.state.robots.length > 0
    ) {
      content = (
        <select
          onChange={this.props.onRobotChange}
          value={this.props.selectedRobotsId}
          className={this.props.robotType}
        >
          {this.state.robots.map(robot => (
            <option key={robot.id} value={robot.id}>
              {robot.name}
            </option>
          ))}
        </select>
      );
    } else if (
      !this.state.isLoading &&
      (!this.state.robots || this.state.robots.length === 0)
    ) {
      content = <p>Could not fetch any data.</p>;
    }

    return <div className="robotSelectorContainer">{content}</div>;
  }
}

/************************************/
//            App COMPONENT        
/************************************/
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRobotId: 1,
      robotType: "good",
      destroyed: false
    };
  }

  onRobotChange = event => {
    const robotId = event.target.value;
    this.setState({ selectedRobotId: robotId });
  };
  onRobotTypeChange = robotType => {
    this.setState({ robotType });
  };
  onDestruction = () => {
    this.setState({ destroyed: true });
  };
  render() {
    if (this.state.destroyed) {
      return <h1>This bad robot destroyed everything!</h1>;
    }
    return (
      <React.Fragment>
        <h1>React Lifecycle with hooks</h1>
        <RobotSelector
          robotType={this.state.robotType}
          selectedRobotId={this.state.selectedRobotId}
          onRobotChange={this.onRobotChange}
        />
        <Robot selectedRobotId={this.state.selectedRobotId} />
        <div className="controls">
          <button onClick={this.onRobotTypeChange.bind(this, "good")}>
            Good Robot
          </button>
          <button
            className="bad"
            onClick={this.onRobotTypeChange.bind(this, "bad")}
          >
            Bad Robot
          </button>
          {this.state.robotType === "bad" && (
            <button className="dangerous" onClick={this.onDestruction}>
              Destroy
            </button>
          )}
        </div>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));