import React, { useEffect, useState, useRef } from 'react';
import {
  View, 
  StyleSheet,
  AppState,
  Alert,
  Linking,
  Text,
  TouchableOpacity,
  Image
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useSelector } from 'react-redux';
import IQAIRDetails from './IQAIRDetails';
import Assets from '../../../../components/assets.manager.js';
import Theme from '../../../../components/theme.style';
import CustomHeader from '../../../../components/header.js';
import RNLocation from 'react-native-location';
import REQUEST from '../../../../components/api';
import DB from '../../../../components/storage';
import Map from './Map';

const MapContainer = () => {
  const app_theme = useSelector(state => state.appThemeReducer.theme);
  const navigation = useNavigation();

  const [permissionLocation, setPermissionLocation] = useState(false);
  const [selected, setSelected] = useState(undefined);
  const [selectedMarker, setSelectedMarker] = useState(undefined);
  const [stations, setStations] = useState([]);
  const [region, setRegion] = useState({
    latitude: 14.599512,
    longitude: 120.984222,
    latitudeDelta: 15,
    longitudeDelta: 11,
  })
  
  const mapRef = useRef(null);
  const appState = useRef(AppState.currentState);

  useEffect(() => {
    AppState.addEventListener('change', handleAppStateChange);
    handleAppStateChange();
  }, [])

  const handleAppStateChange = (nextAppState) => {
    if(!nextAppState || (appState.current?.match(/inactive|background/) && nextAppState === 'active')) {
      getPermissionStatus();
    }
    
    appState.current = nextAppState;
  }

  const getPermissionStatus = () => {
    RNLocation.requestPermission({
      ios: "whenInUse", // or 'always'
      android: {
        detail: "coarse"
      }
    }).then(granted => {
      if(granted) {
        setPermissionLocation(true);
        init()
      } else {
        setPermissionLocation(false);
        Alert.alert("Information", '\n' + "Location GPS is disabled.")
      }
    })
  }

  const init = async () => {
    RNLocation.getLatestLocation({ timeout: 20000 }).then(latestLocation => {
      const coords = {longitude: latestLocation.longitude, latitude: latestLocation.latitude};
      fetch(coords);
      goToRegion(coords);
    })
  }

  const goToRegion = (data) => {
    if(!data) return
    let initialRegion = {
      latitude: parseFloat(data.latitude),
      longitude: parseFloat(data.longitude),
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421
    }

    setRegion(initialRegion);
  }

  const fetch = async (location) => {
    if(!location) return false
    let SESSION = await DB.session()
    REQUEST('gas_stations', 'post', {
      Authorization: SESSION.token
    }, {}, {
      lcard_uuid: SESSION.user.lcard_uuid,
      longitude: location.longitude,
      latitude: location.latitude
    }, async (res) => {
      setStations(res.data);
    }, (err) => {
      Alert.alert("Information", `\n${err.message}`);
    })
  }

  const getRef = (ref) => {
    mapRef.current = ref;
  }

  const onMarkerPressed = (e, marker) => {
    goToRegion(e.nativeEvent.coordinate);
    setSelected(e.nativeEvent.coordinate);
    setSelectedMarker(marker);
  }

  const onMapReady = () => {}

  if(!permissionLocation){
    return (
      <View style={styles.container}>
        <CustomHeader back={true} onBackPress={() => navigation.goBack()} title="IQAIR Location" menu={false} navigation={navigation} />
        <View style={styles.subContainer}>
          <Image source={Assets.icons.no_connection} style={styles.noLocationImage} />
          <View style={styles.textContainer}>
            <Text style={styles.title1(app_theme)}>This function needs your permission, please allow access.</Text>
            <TouchableOpacity onPress={() => Linking.openSettings()}
            style={styles.goToSettingsButton}>
              <Text style={styles.gotoSettingsText}>Allow on settings</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }

  return (
    <View style={styles.container}>
      <CustomHeader back={true} onBackPress={() => navigation.goBack()} title="IQAIR Location" menu={false} navigation={navigation} />
      <Map 
        region={region}
        getRef={getRef}
        onMapReady={onMapReady}
        markers={stations}
        onMarkerPressed={onMarkerPressed}
      />
      <IQAIRDetails 
        selected={selected}
        item={selectedMarker}
      />
    </View>
  )
}

export default MapContainer

const styles = StyleSheet.create({
  container: { 
    flex: 1
  },
  subContainer: {
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    marginHorizontal: 8 
  },
  noLocationImage: {
    width: 150, 
    height: 120 
  },
  textContainer: {
    alignItems: 'center', 
    justifyContent: 'center' 
  },
  title1: (app_theme) => {
    return {
      color: app_theme?.theme.colors.text, 
      fontSize: 15, 
      padding: 15, 
      textAlign: 'center' 
    }
  },
  goToSettingsButton: {
    padding: 15, 
    backgroundColor: Theme.colors.primary, 
    borderRadius: 5 
  },
  gotoSettingsText: {
    color: Theme.colors.white, 
    fontSize: 15, 
    textAlign: 'center' 
  }
})