import React from 'react';
import { View, StyleSheet } from 'react-native';
import {
    Marker,
    MarkerDragEvent,
    MarkerDragStartEndEvent,
} from 'react-native-maps';
import { MapPolygonExtendedProps } from '../lib/types';
import { getMiddleCoordinates } from '../lib/helpers';

export const SubCircleMarkers = React.memo(
    (props: {
        polygon: MapPolygonExtendedProps;
        onDragStart: (index: number) => (e: MarkerDragStartEndEvent) => void;
        onDrag: (index: number) => (e: MarkerDragEvent) => void;
        onDragEnd: (index: number) => (e: MarkerDragStartEndEvent) => void;
    }) => {
        const middleCoordinates = getMiddleCoordinates(
            props.polygon.coordinates,
        );
        return (
            <>
                {middleCoordinates.map((coordinate, coordIndex) => (
                    <Marker
                        key={coordIndex}
                        identifier={coordIndex.toString()}
                        coordinate={coordinate}
                        anchor={{ x: 0.5, y: 0.5 }}
                        draggable={true}
                        onDragStart={props.onDragStart(coordIndex)}
                        onDrag={props.onDrag(coordIndex)}
                        onDragEnd={props.onDragEnd(coordIndex)}
                        tracksViewChanges={false}
                    >
                        <View pointerEvents="none">
                            <View
                                style={[
                                    styles.subCircleMarker,
                                    {
                                        borderColor: props.polygon.strokeColor,
                                    },
                                ]}
                            />
                        </View>
                    </Marker>
                ))}
            </>
        );
    },
);

SubCircleMarkers.displayName = 'SubCircleMarkers';

const styles = StyleSheet.create({
    subCircleMarker: {
        backgroundColor: 'rgba(255, 255, 255, .3)',
        borderRadius: 100,
        borderWidth: 1,
        borderStyle: 'dotted',
        width: 16,
        height: 16,
    },
});