class App extends Component {
  //api call for latest space launch
  constructor(props) {
    super(props);
    this.state = {
      selectedLaunch: "",
      launchData: "",
      videoURL: null,
      allPastLaunches: [],
      showVideo: false
    };
  }

  componentWillMount() {
    this.getLaunchData()
  }

  switchLaunch(launch) {
    debugger
  }


  getLaunchData() {
    // getting latest launch
    fetch('https://api.spalta.launch/launch')
      .then(response => {
        return response.json();
      })
      .then(json => {
        this.setState({
          launchData: json,
          videoURL: json.links["video_link"],
          missionPatch: json.links["mission_patch"]
        });
      });

    //getting all previous launches
    fetch('https://api.spalta.launch/prevLaunches')
      .then(response => {
        return response.json();
      })
      .then(json => {
        this.setState({
          allPastLaunches: json,
        });
      });

  }
  render() {
    let dataReady = this.state.videoURL;

    if (this.state.launchData != null) {
      return (
        <div className="App">
          {this.state.allPastLaunches ?
             <Header
               key="header"
               missionPatch = {this.state.missionPatch}
               allPastLaunches = {this.state.allPastLaunches}
               switchLaunch = {this.switchLaunch}
             />
           :
              <div>Loading...</div>
           }

class Header extends Component {

  componentDidMount() {
  }


  render() {

    var launches = this.props.allPastLaunches;

    var imgClass = classNames({
      'img-container': true,
      'animated': true,
      'fadeInDownBig': true
    });

    return (
      <div key = "container" className="header-container">
        <div key = "img-container">
            {launches.map((launch, index) =>
                <span key = {index} onClick= {() => { this.props.switchLaunch(index) }} >
                    {launch["rocket"].rocket_id}
                </span>

            )}