import React from 'react';
import {useState, useEffect} from 'react';
import {SafeAreaView, ScrollView, 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 DB from '../../../components/storage';
import REQUEST from '../../../components/api';
import Elements from '../../../components/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 MapFragment  from './fragments/map.js';
import PanelFragment from './fragments/stationdetailspanel.js';
import CustomSafeArea from '../../../components/safeArea.component.js';

export default function StationDetails(navigation){

  const [loading, setloading] = useState(true)
  const [station, setstation] = useState({
    contact_numbers: [],
    name: '',
    fuel_prices: [],
    address: '',
    stars: 0
  })
  const [markers, setmarkers] = useState([])
  const [initialRegion, setinitialRegion] = useState(null)

  const init = async () => {
    setmarkers(navigation.route.params?.markers)
    setinitialRegion({
      latitude: navigation.route.params?.data.latitude,
      longitude: navigation.route.params?.data.longitude,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421
    })
    getStationDetails(navigation.route.params?.data.station_uuid)
  }

  const getStationDetails = async (uuid) => {
    const SESSION = await DB.session()
    console.log("TOKEN", SESSION.token, uuid)
    await REQUEST("gas_station_fuel", "get", {Authorization: SESSION.token}, {noID: true, value: uuid}, {}, 
    async (res) => {
      setloading(false)
      if(res.status == 1){
        setstation(res.data)
      }
    }, (err) => {
      setloading(false)
      console.log(err)
    })
  }

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

  const navigate = (data) => {
    navigation.navigation.navigate('StationDetails', {markers: markers, data: data, onBackPress: () => init()})
  }

  return (
      <CustomSafeArea>
        <Elements.loader visible={loading} />
        <View style={{flex: 1}}>
          <CustomHeader title="" back={true} onBackPress={() => {
            navigation.route.params?.onBackPress()
            navigation.navigation.goBack()

          }} navigation={navigation}/>
          <View style={{flex: 1, flexDirection: 'column', justifyContent: 'center', height: Theme.screen.h, width: Theme.screen.w}}>
            <MapFragment
              region={initialRegion}
              markers={markers}
              onMarkerClick={(data) => navigate(data)}
              onMapReady={() => init()}
              onMarkerClick={(data) => navigate(data)}
              pinSelected={true}
            />          
          </View>        
          <PanelFragment
            visible={false} 
            data={station}
            onload={setloading}
            stationId={navigation.route.params?.data.station_uuid} 
            loading={false}
            error={null}
            snapPoints={['35', '8', '0']}
            onError={() => init()}
            lat={navigation.route.params?.location.latitude}
            lon={navigation.route.params?.location.longitude}
          />
        </View>
      </CustomSafeArea>
    )
}