//REDUCER Exemple
import {Map} from 'immutable';
import {loop, Effects} from 'redux-loop-symbol-ponyfill';
import {post} from '../../utils/api';

const initialState = Map({
  cars: [],
  loading: false
});

const GET_CAR_REQUEST = 'ProfilState/GET_CAR_REQUEST';
const GET_CAR_RESPONSE = 'ProfilState/GET_CAR_RESPONSE';

export function getCar() {
  return {type: GET_CAR_REQUEST};
}

async function getCarResponse() {
  return {
    type: GET_CAR_RESPONSE,
    payload: await post('/graphql', {
      query: `{
      getVehicule {
        _id
        modele
        marque
        plaque
        couleur
        picture
        nb_places
      }
    }`
    })
  };
}

export default function ProfilStateReducer(state = initialState, action = {}) {
  switch (action.type) {
    case GET_CAR_REQUEST:
      return loop(
        state.set('loading', true),
          Effects.promise(getCarResponse)
      );

    case GET_CAR_RESPONSE:
      return state
            .set('loading', false)
            .set('cars', action.payload.data.getVehicule);

    default:
      return state;
  }
}


// Connect Container Component
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {NavigationActions} from 'react-navigation';
import ProfilView from './ProfilView';
import * as ProfilStateActions from './ProfilState';

export default connect(
  state => ({
    cars: state.getIn(['profil', 'cars']),
    user: state.getIn(['login', 'user'])
  }),
  dispatch => {
    return {
      navigate: bindActionCreators(NavigationActions.navigate, dispatch),
      profilStateActions: bindActionCreators(ProfilStateActions, dispatch)
    };
  }
)(ProfilView);


//How I fetch my data from my reducer
componentWillMount() {
  this.props.profilStateActions.getCar();
}

//How I render my data, in my render
renderHeader = () => {
  if (!this.props.cars) {
    return null;
   }
  else {
    return (<HeaderProfil {...this.props} headerHeight={300}/>);
  }
}

render() {
  return (<View>{this.renderHeader()}</View>)
}