import React from 'react';
import {useState, useEffect} from 'react';
import { connect } from 'react-redux';
import {ScrollView, SafeAreaView, StyleSheet, Text, View, Dimensions, Button, Image, TextInput, TouchableOpacity, ActivityIndicator, Platform} from 'react-native';
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 {Divider} from 'react-native-elements';

import Geolocation from '@react-native-community/geolocation';
import SlidingUpPanel from 'rn-sliding-up-panel';
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';

import SearchFragment from './fragments/searchbar.js';
import CustomSafeArea from '../../../components/safeArea.component.js';

class StationDetails 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
    }, {}, {}, (res) => {
      this.setState({ cities: res.data })
    }, (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(this.state.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 (
      <CustomSafeArea>
        <View style={{flex: 1}}>
          <CustomHeader title="" back={true} 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: [] })
              }}/>
            <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>
      </CustomSafeArea>
    )
  }
}

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

export default connect(mapStateToProps, null)(StationDetails)

// export default function StationDetails(navigation){

//   const [searchValue, setSearchValue] = useState(navigation.route.params.value || "")
//   const [cities, setcities] = useState("")
//   const [cityDropDown, setCityDropDown] = useState([])

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

//   const search = (value) => {
//     setSearchValue(value)
//     let result = []
//     for(var x=0;x<cities.length;x++){
//       let name = cities[x].name.toLowerCase()
//       if(name.includes(value.toLowerCase()) && cities[x].count > 0) result.push(cities[x])
//     }
//     console.log("SR", result)
//     setCityDropDown(result)
//   }

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

//   useEffect(() => {
//     init()
//   }, [])

//   return (
//     <SafeAreaView>
//       <View style={{flex: 1}}>
//         <CustomHeader title="" back={true} navigation={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={searchValue}
//             onChangeText={(value) => search(value)}
//             onClear={() => {
//               setSearchValue("")
//               setCityDropDown([])
//             }}/>
//           <TouchableOpacity onPress={() => {
//               navigation.route.params.onBackPress(searchValue, {}, true)
//               navigation.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: 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}}>
//               {cityDropDown.length > 0 && searchValue != "" ? renderDropDown() : null}
//             </ScrollView>
//           </View>
//         </View>        
//       </View>
//     </SafeAreaView>
//   )
// }