/**
 * 首页地图定制布局
 * @邠心vbe on 2023/09/01
 */
import React from 'react';
import { View, Pressable, Image, StyleSheet } from 'react-native';
import Toolbar, { BackButton, Styles } from '../../components/Toolbar';
import { PageList } from '../Router';
import BottomSiteInfo from './maps/BottomSiteInfo';
import Maps from './maps/Maps';
import PinMessage from './maps/PinMessage';
import SearchTool from './maps/SearchTool';

export default MapUI = ({
  state,
  navigation,
  onFilter,
  onMapReady,
  onFavorite,
  onLocation,
  onCloseInfo,
  useApplesMap,
  showUserLocation,
  viewChargeStation,
  pinMessages=[]
}) => {
  return (
    <View style={ui.flex1}>
      <Toolbar>
        <BackButton
          style={styles.navIcon}
          onPress={() => {
            navigation?.toggleDrawer();
          }}>
          <EvilIcons
            name={'navicon'}
            size={28}
            color={colorPrimary}
            style={{width: 28, height: 28, lineHeight: 28}} />
        </BackButton>
        <View style={styles.logoView}>
          <Image
            source={require('../../images/tool-logo.png')}
            style={Styles.logo}
            resizeMode="contain"
          />
        </View>
        {/* <Text style={ui.flex1}></Text> */}
        <BackButton
          style={styles.navIcon}
          onPress={() => startPage(PageList.scanqr, {actionDetail: true})}>
          <MaterialCommunityIcons
            name='line-scan'
            size={20}
            color={colorPrimary}
          />
        </BackButton>
      </Toolbar>
      <SearchTool
        count={state.stopList?.length}
        mapReady={state.mapReady}
        onFilter={onFilter}
        onLocation={onLocation}
        navigation={navigation}
      />
      <PinMessage messageList={pinMessages}/>
      <View style={styles.mapContent}>
        <Maps.Maps3
          region={state.region}
          stopList={state.stopList}
          onMapReady={onMapReady}
          useApplesMap={useApplesMap}
          onMarkerPress={viewChargeStation}
          showUserLocation={showUserLocation}
        />
        <BottomSiteInfo
          visible={state.showStation}
          stationInfo={state.stationInfo}
          onFavorite={onFavorite}
          onClose={onCloseInfo}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  logoView: {
    /*left: 0,
    right: 0,
    bottom: 0,
    zIndex: 1,
    alignItems: 'center',
    position: 'absolute',*/
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  navIcon: {
    width: 42,
    height: 42,
    marginLeft: 4,
    marginRight: 2,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center'
  },
  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: {
    flex: 1,
    zIndex: 4,
    position: 'relative',
  }
})