SearchScreen

/* global require */
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  Picker
} from 'react-native';
import PropTypes from 'prop-types';
import { Item, Input } from 'native-base';
import { Form } from 'native-base';
import PrimeButton from '../elements/PrimeButton';

import NavigationBar from '../elements/NavigationBar';

import CommonStyles from '../styles/CommonStyles';
import {
  responsiveWidth,
  responsiveHeight,
  deviceWidth,
  colors,
  fontSize,
  fontFamily,
  spaceVertical,
  marginHorizontal,
  borderRadius,
  btnHeight,
  btnWidth
} from '../styles/variables';
import {
  scanIc,
  searchIc,
} from '../styles/icon-variables';

const INFO_WIDTH = responsiveWidth(42.13);

export default class SearchScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'type something',
      service:'',
      city:'',
      dataLocation:[],
      dataService:[]
    };
  }

  componentDidMount() {
    var requestLocation = 'https://api.hellobeauty.id/public/location';
    var requestService = 'https://api.hellobeauty.id/public/category';
    fetch(requestLocation).then((response) => response.json()).then((responseData)  => {
      this.setState({
          dataLocation: responseData.result
      });
  }).then(()=>{
      fetch(requestService).then((response) => response.json()).then((responseData) => {
       this.setState({
          dataService: responseData.result,
          isFinish: true
       });
   }).done();
  }).done();
  }

  render() {
    const signInBtnSetting = {
      btnWidth: btnWidth.normal,
      btnHeight: btnHeight,
      style: {
        marginBottom: spaceVertical.semiSmall,
      }
    };

    return (
      <View style={CommonStyles.container}>
        <NavigationBar
          back
          navigation={this.props.navigation}
          centerChildren={
            <Item style={styles.item}>
              <Image
                source={require('../../img/icons/search.png')}
                style={{width: searchIc.width, height: searchIc.height, marginRight: 5}}
              />
              <Input
                placeholder="type something"
                style={StyleSheet.flatten(styles.input)}
              />
            </Item>
          }
          centerStyle={{
            width: deviceWidth * 3.6/5,
          }}
          title='SEARCH'
        />
        <Form style={styles.form}>
          <View style={{flexDirection: 'row'}}>
            <Text black semiBold large style={{marginTop: spaceVertical.small/2}}>
                Service
            </Text>
            <Picker
              selectedValue={this.state.service}
              style={{ height: 50, width: 100, justifyContent:'center' }}
              onValueChange={(itemValue, itemIndex) => this.setState({service: itemValue})}>
              {
                this.state.dataService.map((item, key) => (
                  <Picker.Item key={key} label={item.name} itemValue={item.service_category_id} />
                ))
              }
            </Picker>
          </View>
          <View style={{flexDirection: 'row'}}>
            <Text black semiBold large style={{marginTop: spaceVertical.small/2}}>
              Location
            </Text>
            <Picker
              selectedValue={this.state.city}
              style={{ height: 50, width: 100, justifyContent:'center'}}
              onValueChange={(itemValue, itemIndex) => this.setState({city: itemValue})}>
              {
                this.state.dataLocation.map((item, key) => (
                  <Picker.Item key={key} label={item.name} itemValue={item.city_id} />
                ))
              }
            </Picker>
          </View>
        </Form>
        <View style={styles.btnCont}>
          <PrimeButton
            navigation={this.props.navigation}
            setting={signInBtnSetting}
            btnText='SEARCH'
            onPressButton={this.handleOnPressSearch.bind(this)}
          />
        </View>
      </View>
    );
  }

  handleOnPressSearch() {
    // const {
    //   service,
    //   city,
    // } = this.state;
    let isError = false;
    this.props.navigation.navigate('ListProductsScreen',
    {service : this.state.service,
      city : this.state.city}
    );
  }
}

const styles = StyleSheet.create({
  item: {
    marginLeft: 0,
    borderColor: colors.black,
    borderBottomWidth: 1,
  },
  input: {
    height: responsiveHeight(5.39),
    color: colors.black,
    fontSize: fontSize.small,
    fontFamily: fontFamily.regular,
  },
  dealInfo: {
    position: 'absolute',
    left: INFO_WIDTH,
    justifyContent: 'space-between',
    width: deviceWidth - INFO_WIDTH,
    height: responsiveHeight(21.29),
    paddingVertical: spaceVertical.small,
    paddingLeft: marginHorizontal.small,
    paddingRight: marginHorizontal.semiSmall/2,
    borderRadius: borderRadius.normal,
    backgroundColor: colors.white,
  },
  form: {
    paddingTop: spaceVertical.small,
    paddingBottom: responsiveHeight(6)
  },
  btnCont: {
    alignItems: 'center',
    paddingBottom: spaceVertical.semiSmall,
  }
});

SearchScreen.propTypes = {
  navigation: PropTypes.any,
  onPressSearch: PropTypes.any
};