import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import {MarkerView} from '@rnmapbox/maps';

import {useSelector} from 'react-redux';
import {RootState, store} from '@redux/store';
import CircleNumber from './cluster/Cluster';
import {EventMarker} from './EventMarker';
import {PA_Point} from './types';

function DisplayMarkerList() {
  const eventMapMarkers = useSelector(
    (state: RootState) => state.nonSaveVariables.eventMapMarkers,
  );

  const colors = store.getState().nonSaveVariables.theme.colors;

  return (
    <React.Fragment>
      {eventMapMarkers.map((marker: PA_Point) => {
        return marker.type === 'event' || marker.type === 'eventStore' ? (
          <MarkerView
            key={marker.id}
            anchor={{x: 0.5, y: 1}}
            coordinate={[marker.longitude, marker.latitude]}
            allowOverlap={true}>
            <EventMarker marker={marker} />
          </MarkerView>
        ) : (
          <MarkerView
            key={marker.id}
            anchor={{x: 0.5, y: 0.5}}
            coordinate={[marker.longitude, marker.latitude]}
            allowOverlap={true}>
            <CircleNumber number={marker.cluster} />
          </MarkerView>
        );
      })}
    </React.Fragment>
  );
}

const styles = StyleSheet.create({
  marker: {
    padding: 5,
    borderRadius: 5,
  },
  markerText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

export default DisplayMarkerList;
