import React, {
  Component,
  PropTypes,
  StyleSheet,
  Text,
  TextInput,
  View,
  ScrollView,
  TouchableHighlight,
  PickerIOS,
  Slider,
  StatusBar
} from 'react-native';
import globalVariables from '../styles/globalVariables.js'
import PricePickerContainer from './PricePickerContainer.js'
import YearPickerContainer from './YearPickerContainer.js'
import CarConditionPicker from './CarConditionPicker.js';
import CarMakePickerContainer from './CarMakePickerContainer.js';
import ZipCodeContainer from './ZipCodeContainer.js';
import setQueryAction from '../actions/setQueryAction.js';
import searchActions from '../actions/searchActions.js';
import MultiSlider from 'react-native-multi-slider';
import Immutable from 'immutable';
import { connect } from 'react-redux';
import backend from '../service/backend.js';



let PickerItemIOS = PickerIOS.Item;

@connect(state => ({
  query: state.search,
  CAR_MAKES_AND_MODELS: state.search.allCars
}))
export default class Counter extends Component {
  static propTypes = {
    dispatch: React.PropTypes.func.isRequired,
    query: React.PropTypes.object.isRequired
  };

  constructor(props) {
    super(props);
  }

  goToResults() {
    console.log('going');
    console.log(this.props.query);
    //TODO: change state data to store
    //backend.getCarData(object);
    this.props.dispatch(searchActions(this.props.query));
  }

  render() {
    const { query, dispatch, CAR_MAKES_AND_MODELS } = this.props;
    return (
  <ScrollView style={styles.container}>
    <View style={styles.page}>
      <StatusBar hidden={false} backgroundColor='blue'/> 
      <CarConditionPicker />
      <CarMakePickerContainer />
      <PricePickerContainer />
      <YearPickerContainer />
      <ZipCodeContainer />

    <TouchableHighlight
      underlayColor="#88D4F5"
      onPress={this.goToResults.bind(this)}
    >
    <Text>Search </Text>
    </TouchableHighlight>

    </View>
   </ScrollView>
)
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 15,
    backgroundColor: globalVariables.background
  },

  page: {
    paddingBottom: 50
  },

  searchButton: {
    padding: 14,
    backgroundColor: globalVariables.green
  },

  searchButtonText: {
    fontSize: 16,
    color: 'white',
    textAlign: 'center'
  }
});

import React, {
  Component,
  PropTypes,
  StyleSheet,
  Text,
  TextInput,
  View,
  ScrollView,
  TouchableHighlight,
  PickerIOS,
  Slider,
  StatusBar
} from 'react-native';
import globalVariables from '../styles/globalVariables.js'
import PricePickerContainer from './PricePickerContainer.js'
import YearPickerContainer from './YearPickerContainer.js'
import CarConditionPicker from './CarConditionPicker.js';
import CarMakePickerContainer from './CarMakePickerContainer.js';
import ZipCodeContainer from './ZipCodeContainer.js';
import setQueryAction from '../actions/setQueryAction.js';
import searchActions from '../actions/searchActions.js';
import MultiSlider from 'react-native-multi-slider';
import Immutable from 'immutable';
import { connect } from 'react-redux';


let PickerItemIOS = PickerIOS.Item;

@connect(state => ({
  query: state.search,
  CAR_MAKES_AND_MODELS: state.search.allCars
}))
export default class Counter extends Component {
  static propTypes = {
    dispatch: React.PropTypes.func.isRequired,
    query: React.PropTypes.object.isRequired
  };

  constructor(props) {
    super(props);
  }

  goToResults() {
    console.log('going');
    console.log(this.props.query);
    this.props.dispatch(searchActions(this.props.query));
  }

  render() {
    const { query, dispatch, CAR_MAKES_AND_MODELS } = this.props;
    return (
  <ScrollView style={styles.container}>
    <View style={styles.page}>
      <StatusBar hidden={false} backgroundColor='blue'/> 
      <CarConditionPicker />
      <CarMakePickerContainer />
      <PricePickerContainer />
      <YearPickerContainer />
      <ZipCodeContainer />

    <TouchableHighlight
      underlayColor="#88D4F5"
      onPress={this.goToResults.bind(this)}
    >
    <Text>Search </Text>
    </TouchableHighlight>

    </View>
   </ScrollView>
)
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 15,
    backgroundColor: globalVariables.background
  },

  page: {
    paddingBottom: 50
  },

  searchButton: {
    padding: 14,
    backgroundColor: globalVariables.green
  },

  searchButtonText: {
    fontSize: 16,
    color: 'white',
    textAlign: 'center'
  }
});

remove require backend from Search component