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 SearchFragment from './fragments/searchbar.js';
import CustomSafeArea from '../../components/safeArea.component.js';

class PayatpumpStationSearch extends React.Component {

  constructor(props) {
    super(props)
  }

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

  search = (value) => {
    if(value) {
      let newValue = this.state.cityDropDown.filter(city => city.storeName.toUpperCase().includes(this.state.searchValue.toUpperCase()));
    
      this.setState({ searchValue: value, cityDropDown: newValue })
      return;
    }

    this.setState({ searchValue: value, cityDropDown: this.props.route.params.stations })
  }

  renderDropDown = () => {
    if(this.state.cityDropDown.length === 0) {
      return this.renderNoSearchFound();
    }
    
    return this.state.cityDropDown.map((city, i) => {
      return (
        <TouchableOpacity onPress={() => {
          this.props.route.params.navigate(city);
        }} key={i} style={{flex: 1}}>
          <Text style={{ padding: 20, color: Theme.colors.textPrimary}}>{city.storeName.toUpperCase()}</Text>
          <Divider />
        </TouchableOpacity>
      )
    })
  }

  renderNoSearchFound = () => {
    return (
      <Text style={{marginTop: 50, alignSelf: 'center', color: this.props.app_theme?.theme.dark? this.props.app_theme?.theme.colors.text : Theme.colors.gray}}>No search found</Text>
    )
  }

  render() {
    return (
      <CustomSafeArea>
        <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}}>
            <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: [] })}/>
            <View style={{flex: 1, marginTop: 70}}>
              <ScrollView>
                {this.renderDropDown()}
              </ScrollView>
            </View>
          </View>        
        </View>
      </CustomSafeArea>
    )
  }
}

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

export default connect(mapStateToProps, null)(PayatpumpStationSearch)