import React, { useState } from "react";
import { View, StyleSheet, Image, Text } from "react-native";
import MapView, { Callout } from "react-native-maps";
import colors from "../config/colors";
import { dimensions, screen_height, screen_width } from "../config/dimensions";

const markerSize = 30;

export default function MapMarker({
  title,
  image,
  pictures,
  coordinate,
  description,
  ...props
}) {
  console.log(pictures);
  return (
    <MapView.Marker coordinate={coordinate} {...props}>
      <View>
        <Image style={styles.markerPoint} resizeMode="stretch" source={image} />
      </View>
      <Callout tooltip>
        <View>
          <View style={styles.container}>
            <Text>{"Título: \t" + title}</Text>
            <Text>{"Descrição: \t" + description}</Text>
            <Image
              style={{ width: 200, height: 200 }}
              resizeMode="stretch"
              source={{ uri: JSON.parse(pictures)[0] }}
            />
          </View>
          <View style={styles.arrow}></View>
        </View>
      </Callout>
    </MapView.Marker>
  );
}

const styles = StyleSheet.create({
  arrow: {
    alignSelf: "center",
    borderTopWidth: 20,
    borderRightWidth: 20,
    borderBottomWidth: 0,
    borderLeftWidth: 20,
    borderTopColor: colors.lightGray,
    borderRightColor: "transparent",
    borderBottomColor: "transparent",
    borderLeftColor: "transparent",
    paddingBottom: 8,
  },

  container: {
    flexDirection: "column",
    alignSelf: "center",
    backgroundColor: colors.lightestGray,
    borderColor: colors.lightGray,
    borderRadius: 6,
    borderWidth: 2,
    borderBottomWidth: 4,
    borderRightWidth: 4,
    padding: 15,
    width: screen_width * 0.95,
    height: screen_height * 0.2,
  },
  markerPoint: {
    alignSelf: "center",
    height: markerSize,
    width: markerSize,
  },
  title: {
    fontWeight: "400",
  },
});