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, Alert} 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';
import _ from 'lodash';
import { navigate } from '../../../utils/navigation.js';

class StationDetails extends React.Component {

  constructor(props) {
    super(props)

    this.searchDebounce = _.debounce(this.search, 1000)
  }

  componentDidMount() { 
    this.init()
  }

  init = async () => {
    let SESSION = await DB.session();

    REQUEST('station_search', 'post', {
      Authorization: SESSION.token
    }, {}, {}, (res) => {
      this.setState({ list: res.data });
    }, (err) => {
      Alert.alert("Information", `\n${err.message}`);
    }, "Station", "Search")
  }

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

  onChangeText = (value) => {
    this.setState({ searchValue: value });
    this.searchDebounce(value);
  }

  search = async (value) => {
    let result = this.state.list.filter(item => item.name.toLowerCase().includes(value.toLowerCase()));

    this.setState({ result: result })
  }

  renderDropDown = () => {
    if(this.state.result.length === 0) {
      return this.renderNoSearchFound();
    }

    return this.state.result.map((item, i) => {
      return (
        <TouchableOpacity onPress={() => {
          this.props.route.params.onBackPress(this.state.searchValue, item, false);
          this.props.navigation.goBack()
        }} key={i} style={{flex: 1}}>
          <Text style={{ padding: 20, color: Theme.colors.textPrimary}}>{item.name.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>
    )
  }

  guestChecker = async () => {
    let isGuest = await DB.get('is_guest');
    return isGuest
  }

  guestError = () => {
    Alert.alert(
      "Information", 
      `\nApply for a card to enjoy this feature`,
      [  
        {  
            text: 'Cancel',  
            onPress: () => console.log('Cancel Pressed'),  
            style: { color: 'red' },  
        },  
        {
            text: 'Enroll Card', 
            onPress: () => navigate('Login')
        },  
      ]  
    );
  }

  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} 
              placeHolder={"Search for the nearest station"}
              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={this.onChangeText}
              onClear={() => {
                this.setState({ searchValue: "", cityDropDown: [] })
              }}/>
            <TouchableOpacity onPress={async() => {
                const isGuest = await this.guestChecker()
                console.log(isGuest)
                if(isGuest){
                  this.guestError()
                } else {
                  this.props.route.params.onBackPress(this.state.searchValue, {}, true)
                  this.props.navigation.goBack()
                }
              }} 
              style={{ flexDirection: 'row', height: 60, padding: 15, marginTop: 80}}>
              <Icon.FontAwesome name={"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.searchValue != "" ? this.renderDropDown() : !this.state.searchValue ? this.renderNoSearchFound() : null}
              </ScrollView>
            </View>
          </View>        
        </View>
      </CustomSafeArea>
    )
  }
}

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

export default connect(mapStateToProps, null)(StationDetails)