import React, { Component } from "react";
import { throws } from "assert";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedPerson: null,
      clicked: false,
      selectedPlanet: null,
      selectedText: null
    };
    this.people = [];
    this.planets = [];
    this.texts = [];
  }

  handleClick = () => {
    this.setState({
      clicked: true,
      selectedPerson: this.people[
        Math.floor(Math.random() * this.people.length)
      ],
      selectedPlanet: this.planets[
        Math.floor(Math.random() * this.planets.length)
      ],
      selectedText: this.texts[this.texts.length]
    });
  };

  // getTexts = () => {
  //   this.setState({
  //     texts: [
  //       "Long time ago in a galaxy far far away our hero",
  //       "landed on the",
  //       "planet."
  //     ]
  //   });
  //   console.log(this.texts);
  // };

  // getTexts() {
  //   let joined = this.texts.slice();
  //   joined.push(
  //     "Long time ago in a galaxy far far away our hero",
  //     "landed on the",
  //     "planet."
  //   );

  //   this.setState({ texts: joined });
  //   console.log(joined);
  // }

  getPlanets() {
    const swapi = require("swapi-node");
    swapi.get("https://swapi.co/api/planets/").then(result => {
      console.log("first page of planets", result.results);
      console.log(result.next);

      result.results.forEach(result => {
        this.planets.push(result.name);
        // console.log(this.planets);
      });
    });
  }

  getPeople() {
    const swapi = require("swapi-node");
    swapi.get("https://swapi.co/api/people/").then(result => {
      console.log("first page of people", result.results);
      console.log(result.next);

      result.results.forEach(result => {
        this.people.push(result.name);
        // console.log(this.people);
      });
    });
  }

  componentDidMount() {
    this.getPeople();
    this.getPlanets();
  }

  render() {
    return (
      <React.Fragment>
        <button onClick={this.handleClick}>Click</button>
        <div>
          {this.state.selectedPerson} {this.state.selectedPlanet}
        </div>
      </React.Fragment>
    );
  }
}

export default App;