import React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import SpacexComponent from './Space';
import Mock from './Space/mock';

const GET_SPACEX_DATA = gql`
{
  launchesPast(limit: 10) {
    mission_name
    launch_date_local
    launch_site {
      site_name_long
    }
    links {
      article_link
      video_link
    }
    rocket {
      rocket_name
      first_stage {
        cores {
          flight
          core {
            reuse_count
            status
          }
        }
      }
      second_stage {
        payloads {
          payload_type
          payload_mass_kg
          payload_mass_lbs
        }
      }
    }
    ships {
      name
      home_port
      image
    }
  }
}`
const Profile = () => (
  <Query query={GET_SPACEX_DATA}>
    {({data, loading, error}) => {
      if(error){
        // error occured deal it in your iwn way ..
        return <SpacexComponent mock={true} spacex={Mock}/>
      }
      else if(loading){
        return <span>Loading ...</span>
      } else if (data){
        return <SpacexComponent spacex={data}/>
      }
    }}
  </Query>
);
export default Profile;