import React from 'react';
import { connect } from 'react-redux';
import {ScrollView, SafeAreaView, Text, View, TouchableOpacity, Platform} from 'react-native';
import {Divider} from 'react-native-elements';
import Theme from '../../components/theme.style.js';
import CustomHeader from '../../components/header.js';
import Icon from '../../components/icons.js';
import DB from '../../components/storage';
import REQUEST from '../../components/api';

import SearchFragment from './fragments/searchbar.js';

class PayatpumpStationSearch extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    searchValue: this.props.route.params.value || "",
    cities: "",
    cityDropDown: []
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {

  }

  init = async () => {
    let SESSION = await DB.session()
    REQUEST('station_search', 'post', {
      Authorization: SESSION.token
    }, {}, {}, function(res){
      setcities(res.data)
    },function(error){
      console.log(error)
    })
  }

  search = (value) => {
    let result = []
    for(var x=0;x<this.state.cities.length;x++){
      let name = this.state.cities[x].name.toLowerCase()
      if(name.includes(value.toLowerCase()) && this.state.cities[x].count > 0) result.push(cities[x])
    }
    this.setState({ searchValue: value, cityDropDown: result })
  }

  renderDropDown = () => {
    return this.state.cityDropDown.map((city, i) => {
      return (
        <TouchableOpacity onPress={() => {
          this.props.route.params.onBackPress(this.state.searchValue, city, false)
          this.props.navigation.goBack()
        }} key={i} style={{flex: 1}}>
          <Text style={{ padding: 20, color: Theme.colors.textPrimary}}>{city.name.toUpperCase()}</Text>
          <Divider />
        </TouchableOpacity>
      )
    })
  }

  render() {
    return (
      <SafeAreaView>
        <View style={{flex: 1}}>
          <CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
          <View style={{flex: 1, flexDirection: 'column', height: Theme.screen.h, width: Theme.screen.w, top: Platform.OS == 'ios' ? 50 : 0}}>
            <SearchFragment
              autofocus={true} 
              value={this.state.searchValue}
              textColor={this.props.app_theme?.theme.colors.text}
              isDarkMode={this.props.app_theme?.theme.dark}
              searchBackgroundColor={this.props.app_theme?.theme.colors.border}
              onChangeText={(value) => this.search(value)}
              onClear={() => this.setState({ searchValue: "", cityDropDown: [] })}/>
            <TouchableOpacity onPress={() => {
                this.props.route.params.onBackPress(this.state.searchValue, {}, true)
                this.props.navigation.goBack()
              }} 
              style={{ flexDirection: 'row', height: 60, padding: 15, marginTop: 80}}>
              <Icon.Ionicons name={"md-heart"} size={28} color={"red"} />
              <Text style={{fontFamily: 'arial', padding: 5, marginLeft: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontSize: 17}}>My Favorites</Text>
            </TouchableOpacity>
            <Divider />
            <View style={{flex: 0, height: Theme.screen.h / 1.5, width: '100%'}}>
              <ScrollView style={{flex: 0}}>
                {this.state.cityDropDown.length > 0 && this.state.searchValue != "" ? this.renderDropDown() : null}
              </ScrollView>
            </View>
          </View>        
        </View>
      </SafeAreaView>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(PayatpumpStationSearch)