/**
 * 首页地图LUMI定制布局
 * @邠心vbe on 2024/05/09
 */
import React from 'react';
import { View, Pressable, Image, StyleSheet } from 'react-native';
import Maps from './maps/Maps';
import MapTool from './maps/MapTool';
import SearchTool from './maps/SearchTool';
import BottomSiteInfo from './maps/BottomSiteInfo';
import FilterTop from './maps/FilterTop';
import { BottomSiteCard } from './maps/BottomSiteCard';

export default MapUILumi = ({
  state,
  navigation,
  onFilter,
  onMapReady,
  onFavorite,
  onLocation,
  onCloseInfo,
  useApplesMap,
  showUserLocation,
  viewChargeStation
}) => {
  return (
    <View style={styles.mapContent}>
      {/* this.state.hasPermission &&*/}
      <Maps.Maps3
        region={state.region}
        stopList={state.stopList}
        onMapReady={onMapReady}
        useApplesMap={useApplesMap}
        onMarkerPress={viewChargeStation}
        showUserLocation={showUserLocation}
      />
      <SearchTool
        count={state.stopList?.length}
        mapReady={state.mapReady}
        onFilter={onFilter}
        onLocation={onLocation}
        navigation={navigation}
      />
      <FilterTop
        onFilter={onFilter}
        onLocation={onLocation}
      />
      {/* <MapTool
        count={state.stopList?.length}
        mapReady={state.mapReady}
        onFilter={onFilter}
        onLocation={onLocation}
      /> */}
      <BottomSiteCard
        visible={state.showStation}
        stationInfo={state.stationInfo}
        onFavorite={onFavorite}
        onClose={onCloseInfo}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  logoView: {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 1,
    alignItems: 'center',
    position: 'absolute',
    justifyContent: 'center',
    paddingTop: isIOS ? statusHeight : 0
  },
  searchView: {
    ...$padding(8, 16, 16),
    backgroundColor: colorThemes
  },
  searchInput: {
    alignItems: 'center',
    borderWidth: 1,
    borderStyle: 'solid',
    borderRadius: 60,
    borderColor: colorAccent,
    flexDirection: 'row',
    paddingLeft: 16,
    paddingRight: 16,
    backgroundColor: 'rgba(255, 255, 255, 0.5)'
  },
  searchText: {
    flex: 1,
    color: '#444',
    padding: 8,
    fontSize: 15
  },
  mapContent: {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 2,
    position: 'absolute',
  }
})