import { View, Image, Text } from "react-native";
import { Callout, Marker } from "react-native-maps";
import { LIGHT_THEME } from "../../../common/const/theme";
import { SVGMarker } from "./svg_marker";

interface CustomMapMarkerProps {
    title: string;
    imageUri?: string;
    coordinate: {
      latitude: number;
      longitude: number;
    };
    onPress: () => void;
    isFinished?: boolean;
  }
  
export const CustomMapMarker = ({
    coordinate,
    imageUri,
    title,
    isFinished,
    onPress,
  }: CustomMapMarkerProps) => {
    return (
      <Marker coordinate={coordinate} title={title}>
        <View>
          <View>
            <Image
              source={{ uri: imageUri }}
              style={{
                width: 32,
                height: 32,
                borderRadius: 16,
                position: "absolute",
                top: 3,
                left: 3,
                zIndex: 10,
              }}
            />
            <SVGMarker color={ isFinished ? "green" : "red" } />
          </View>
  
          <Callout onPress={onPress} style={{
              width: 150,
              height: 100,
              borderRadius: 15,
              overflow: "hidden",
              padding: 10,
            }}>
              <View style={{
                height: "100%",
                width: "100%",
                justifyContent: "space-between",
                alignItems: "center",
              }}>
              <Text numberOfLines={2} style={{
                fontSize: 16,
                fontWeight: "bold",
              }}>{title}</Text>
              <View style={{
                height: 30,
                width: "70%",
                borderRadius: 10,
                backgroundColor: LIGHT_THEME.color.primary,
                justifyContent: "center",
                alignItems: "center",
              }}>
                <Text style={{
                  color: "white",
                  fontWeight: "700"
                }}>Do activity</Text>
              </View>
              </View>
          </Callout>
        </View>
      </Marker>
    );
  };
  
 
  