import React from 'react';
import {useState, useEffect} from 'react';
import {SafeAreaView, View} 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 REQUEST_POST_PAY from '../../components/api/postpayapi';
import Elements from '../../components/elements';
import MapFragment  from './fragments/map.js';
import PanelFragment from './fragments/stationdetailspanel.js';

export default function StationDetails(props){

  const [loading, setloading] = useState(true)
  const [station, setstation] = useState(null)
  const [markers, setmarkers] = useState([])
  const [initialRegion, setinitialRegion] = useState(null)

  const init = async () => {
    setmarkers(props.route.params?.markers)
    setinitialRegion({
      latitude: props.route.params?.data.geoLocation.latitude,
      longitude: props.route.params?.data.geoLocation.longitude,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421
    })
    getStationStoreDetails(props.route.params?.data.storeId)
  }

  const getStationStoreDetails = async (storeId) => {
    await REQUEST_POST_PAY("getStoreDetails", "get", {}, {
      storeId: storeId
    }, {}, async (response) => {
      setloading(false)
      if(response.success){
        setstation(response.response)
      }
    }, (err) => {
      setloading(false)
    })
  }

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

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

  const navigateToPayatpumpTransaction = (response, storeId, selectedPump) => {
    props.navigation.navigate('PayatpumpStationTransactionDetails', { response: response, storeId: storeId, storeName: station.storeName, selectedPump: selectedPump.pumpNumber })
  }

  return (
      <SafeAreaView style={{flex: 1}}>
        <Elements.loader visible={loading} />
        <View style={{flex: 1}}>
          <CustomHeader title="" back={true} onBackPress={() => {
            props.route.params?.onBackPress()
            props.navigation.goBack()
          }} navigation={props.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={() => {}}
              onMarkerClick={(data) => navigate(data)}
              pinSelected={true}/>          
          </View>        
          <PanelFragment
            visible={false} 
            data={station}
            onload={setloading}
            stationId={props.route.params?.data.storeId} 
            loading={false}
            error={null}
            snapPoints={['5', '5', '5']}
            onError={() => init()}
            onTransaction={(response, storeId, selectedPump) => navigateToPayatpumpTransaction(response, storeId, selectedPump)}
            lat={props.route.params?.location.latitude}
            lon={props.route.params?.location.longitude}/>
        </View>
      </SafeAreaView>
    )
}