import React from 'react';
import {  
  View, 
  Alert, 
  Image, 
  Linking, 
  Text, 
  TouchableOpacity, 
  AppState,
  Platform,
} from 'react-native';
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
import { connect } from 'react-redux';
import Geolocation from '@react-native-community/geolocation';
import Theme from '../../components/theme.style.js';
import NetInfo from "../../components/netstatus";
import CustomHeader from '../../components/header.js';
import Elements from '../../components/elements.js';
import DB from '../../components/storage';
import REQUEST from '../../components/api';
import REQUEST_POST_PAY from '../../components/api/postpayapi';
import Assets from '../../components/assets.manager.js';
import MapFragment  from '../payatpump/fragments/map.js';
import PanelFragment from '../payatpump/fragments/stationpanel.js';
import SearchFragment from '../payatpump/fragments/searchbar.js';
import CustomSafeArea from '../../components/safeArea.component';
import netstatus from '../../components/netstatus';

class Payatpump extends React.Component {

  constructor(props) {
    super(props)
    this.dataLoader = null
  }

  state = {
    connected: false,
    loading: true,
    error: false,
    session: null,  
    map: null,
    stations: [],
    markers: [],
    searchValue: "",
    showpanel: null,
    mylocation: {},
    isSearched: false,
    initialRegion: {
      latitude: 14.599512,
      longitude: 120.984222,
      latitudeDelta: 15,
      longitudeDelta: 11,
    },
    appState: AppState.currentState,
    permissionLocation: false
  }
  watchID = null

  componentDidMount() {
    this._isMounted = true;
    this.appStateSubscription = AppState.addEventListener(
      'change',
      this._handleAppStateChange
    )
    this.startTrackStation()
  }

  componentWillUnmount() {
    this.appStateSubscription.remove();
  }

  refreshProfileToken = async () => {
    const SESSION = await DB.session()
    this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number  }).then(res => {
      DB.updateProfile(res, function(){}, function(error){})
    })
  }

  _handleAppStateChange = (nextAppState) => {
    if(this.state.loading) return;
    if(this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
      this.initLocationConfiguration();
    }

    this.setState({ appState: nextAppState });

  }

  fetch = async (location, successCallback, errorCallback) => {
    if(!location) return false

    const SESSION = await DB.session();
    const USER_PROFILE = await DB.profile();

    this.setState({ loading: true });
    
    REQUEST("getPercentageRadius", 'get', {
      'Authorization': SESSION.token
    }, {}, {}, (res) => {
      if(res.status == 1 && res.data) {
        REQUEST_POST_PAY('getStores', 'post', {
          token: USER_PROFILE.data.auth_p97,
          language: 'en-US'
        }, {
          latitude: location.latitude,
          longitude: location.longitude,
          radiusMeters: res?.data?.radius
        }, {}, async (result) => {
          successCallback(result)
        }, (error) => {
          errorCallback(error)
        })
      }
    }, (err) => {
      this.setState({ loading: false })
    }, "Percentage Radius", "Fetch")
  }

  renderMarkers = (data) => {
    if(data.length > 0) {
      let datamap = data.map((station, index) => {
        return {
          _id: index,
          latlng: {latitude: station.geoLocation.latitude, longitude: station.geoLocation.longitude},
          station_uuid: station.storeId,
          station_number: station.storeNumber,
          name: station.storeName,
          address: Object.entries(station.address).map(([key, value]) => `${value}`).join(',').toString(),
          longitude: station.geoLocation.longitude,
          latitude: station.geoLocation.latitude,
          store: station
        }
      })
      this.setState({ markers: datamap })
    }
  }

  goToRegion = (data) => {
    if(!data) return
    let initialRegion = {
      latitude: parseFloat(data.latitude),
      longitude: parseFloat(data.longitude),
      latitudeDelta: 0.0043,
      longitudeDelta: 0.0034
    }
    this.setState({ initialRegion: initialRegion })
  }

  navigate = (data) => {
    netstatus.netstatus(state => {
      if(!state) {
        Elements.nointernet2();
      } else {
        this.props.navigation.navigate('PayatpumpDetails', {markers: this.state.markers, data: data, theme: this.props.app_theme, onBackPress: () => this.initLocationConfiguration(), location: this.state.mylocation})
      }
    })
  }

  startTrackStation = () => {
    NetInfo.netstatus(isConnected => {
      if(isConnected){
        this.initLocationConfiguration()
        this.refreshProfileToken()
      } else {
        Elements.nointernet2(this.props)
      }
    })
  }

  initLocationConfiguration = () => {
    this.setState({ connected: true })

    Geolocation.setRNConfiguration({
      locationProvider: 'playServices',
      authorizationLevel: 'always'
    });

    this.init()
  }

  init = () => {
    this.setState({ permissionLocation: true })

    this.setState({ loading: true })
    this.setState({ permissionLocation: true });

    Geolocation.getCurrentPosition(latestLocation => {
      if(latestLocation.coords != undefined) {
        const coords = {latitude: latestLocation.coords.latitude, longitude: latestLocation.coords.longitude}
        this.setState({ mylocation: coords, error: false })
        this.goToRegion(coords)
        this.fetch(coords, response => {
          // if(response.success && response.response.data.length > 0){
          //   this.setState({ showpanel: true, stations: response.response.data, loading: false })
          //   this.renderMarkers(response.response.data)
          //   this.goToRegion({longitude: response.response.data[0].geoLocation.longitude, latitude: response.response.data[0].geoLocation.latitude})
          // } else if(response.success && response.response.data.length === 0) {
          //   this.setState({ loading: false })
          // }
          if(response.status && response.data.data.length > 0){
            this.setState({ showpanel: true, stations: response.data.data, loading: false })
            this.renderMarkers(response.data.data)
            this.goToRegion({longitude: response.data.data[0].geoLocation.longitude, latitude: response.data.data[0].geoLocation.latitude})
          } else if(response.status && response.response.data.data.length === 0) {
            this.setState({ loading: false })
          }
        }, err => {
          Alert.alert("Information", `\n${err.message}`);
          this.setState({ error: true, loading: false })
        })
      }
    }, err => {
      return Alert.alert("Information", '\n' + "Location GPS is disabled.", [{text: "OK", onPress: () => this.setState({ loading: false, permissionLocation: false })}])
    })
  }

  openLink = () => {
    Platform.select({
      ios: Linking.openURL("App-Prefs:Privacy&path=LOCATION"),
      android: Linking.sendIntent("android.settings.LOCATION_SOURCE_SETTINGS")
    })
  }

  render() {
    if(!this.state.connected && !this.state.loading){
      return (
        <CustomSafeArea>
          <CustomHeader title="Nearest Stations" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
          <Elements.nointernet
            message="No internet found. Please check your internet connection."
            buttonText="Try Again"
            onPress={() => this.startTrackStation()}
          />
        </CustomSafeArea>
      )
    }

    if(!this.state.permissionLocation && !this.state.loading){
      return (
        <CustomSafeArea>
          <CustomHeader title="Nearest Stations" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', marginHorizontal: 8 }}>
            <Image source={Assets.icons.no_connection} style={{ width: 150, height: 120 }} />
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, padding: 15, textAlign: 'center' }}>This function needs your permission, please allow access.</Text>
              <TouchableOpacity onPress={this.openLink}
              style={{ padding: 15, backgroundColor: Theme.colors.primary, borderRadius: 5 }}>
                <Text style={{ color: Theme.colors.white, fontSize: 15, textAlign: 'center' }}>Allow on settings</Text>
              </TouchableOpacity>
            </View>
          </View>
        </CustomSafeArea>
      )
    }
  
    return (
        <CustomSafeArea>
          <CustomHeader title="Nearest Stations" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
          <View style={{flex: 1, backgroundColor: 'green'}}>
            <MapFragment
              region={this.state.initialRegion}
              markers={this.state.markers}
              onMapReady={() => this.goToRegion(this.state.stations.length > 0 ? this.state.stations[0] : null)}
              onMarkerClick={(data) => this.navigate(data)}
            />
            <SearchFragment 
              value={this.state.searchValue}
              clear={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={(e) => this.setState({ searchValue: e.target.value })}
              onFocus={() => {
                this.props.navigation.navigate("PayatpumpStationSearch", {
                  value: this.state.searchValue,
                  stations: this.state.stations,
                  navigate: (data) => this.navigate(data)
                })
              }}
            />
          </View>
            <PanelFragment
              visible={this.state.showpanel} 
              data={this.state.stations} 
              loading={this.state.loading}
              isSearched={this.state.isSearched}
              onClick={(data) => this.navigate(data)}
              onUpdateFavorite={(index, update) => {
                let updatedStations = this.state.stations
                updatedStations[index].favorite = update
                this.setState({ loading: true, stations: updatedStations })
              }}
              error={this.state.error && this.state.stations.length == 0}
              onError={() => this.initLocationConfiguration()}/>  
        </CustomSafeArea>
      )
  }
}

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

const mapDispatchToProps = {
  saveUserInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(Payatpump)