/************************************/
//            Robot COMPONENT       
/************************************/
const Robot = (props) => {
  const [loadedRobot, setLoadedRobot] = React.useState({});
  const [isLoading, setIsLoading] = React.useState(false);

  const fetchData = () => {
    setIsLoading(true);
    fetch(`https://robohash.org/${props.selectedRobotId}`, {
      "Content-type": "application/octet-stream"
    })
      .then(response => {
        if (response.status !== 200) {
          throw new Error("Could not fetch the Robot");
        }
        return response.blob();
      })
      .then(robot => {
        setIsLoading(false);
        setLoadedRobot(window.URL.createObjectURL(robot));
      })
      .catch(err => console.error(err));
  };

  React.useEffect(() => {
    console.log('Robot: componentWillUpdate');
    fetchData();
  }, [props.selectedRobotId]);

  React.useEffect(() => {
    console.log('Robot: componentDidMount');
    return () => {
      console.log('Robot: componentWillUnmount');
    }
  }, []);
  let content = <p>Loading robot...</p>;
    if (!isLoading && loadedRobot) {
      content = (
        <img
          width="150"
          src={loadedRobot}
          alt=""
          onLoad={function(event) {
            window.URL.revokeObjectURL(event.target.src);
          }}
        />
      );
    } else if (!isLoading && !loadedRobot) {
      content = <p>Failed to load robot!!!</p>;
    }

    return <div className="robotContainer">{content}</div>;
}
/************************************/
//     RobotSelector COMPONENT     
/************************************/
const RobotSelector = ({onRobotChange, selectedRobotsId, robotType}) => {
  const [robots, setRobots] = React.useState([]);
  const [isLoading, setIsLoading] = React.useState(false);
  React.useEffect(() => {
    setIsLoading(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).map((robot, index) => ({
            name: robot.name,
            id: index + 1
          }));
          setRobots(selectedRobots);
          setIsLoading(false);
        })
      .catch(err => {
        console.log(err);
      });
  }, []);

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

  return <div className="robotSelectorContainer">{content}</div>;
}
/************************************/
//            App COMPONENT        
/************************************/
const App = () => {
  const [selectedRobotId, setSelectedRobotId] = React.useState(1);
  const [robotType, setRobotType] = React.useState("good");
  const [destroyed, setDestroyed] = React.useState(false);
  
 const onRobotChange = event => {
    const robotId = event.target.value;
    setSelectedRobotId(robotId);
  };
  const onRobotTypeChange = robotType => {
    setRobotType(robotType);
  };
  const onDestruction = () => {
    setDestroyed(true);
  };

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

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