WPD-MobileApp/src/app/components/MapModal.js

import React, { useState } from "react";
import { Text, TouchableOpacity, View, StyleSheet, Image } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import SelfClosingModal from "../components/SelfClosingModal";
import colors from "../config/colors";
import { showMessage } from "react-native-flash-message";
import { dimensions, screen_height } from "../config/dimensions";
import { Svg, Image as ImageSvg } from "react-native-svg";
import { ScrollView } from "react-native-gesture-handler";
import PluviometerGraphics from "./PluviometerGraphics";

const chartHeight = screen_height * 0.3;

/* NOTE: `Edit` and `Delete` icons behavior not implemented yet.
 *
 *   Waiting for API handler to implement this functionality and avoid overwork
 */
function notImplemented() {
  showMessage({
    message: "Comportamento ainda não implementado",
    duration: 1950,
    icon: "warning",
    type: "warning",
  });
}

function topBar(setShowModal) {
  return (
    <View style={styles.topBar}>
      <TouchableOpacity
        style={styles.topBarIcon}
        onPress={() => notImplemented()}
      >
        <MaterialCommunityIcons
          name="pencil"
          size={20}
          color={colors.dark}
          alignItems="center"
        />
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.topBarIcon}
        onPress={() => notImplemented()}
      >
        <MaterialCommunityIcons
          name="trash-can"
          size={20}
          color={colors.dark}
          alignItems="center"
        />
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.topBarIcon}
        onPress={() => setShowModal(null)}
      >
        <MaterialCommunityIcons
          name="close"
          size={20}
          color={colors.dark}
          alignItems="center"
        />
      </TouchableOpacity>
    </View>
  );
}

function iconTextRow(props) {
  return (
    <View flexDirection="row" alignSelf="flex-start" marginVertical={3}>
      <View alignSelf="flex-start" marginRight={10}>
        <MaterialCommunityIcons
          name={props.name}
          size={18}
          color={colors.dark}
        />
      </View>

      <Text style={styles.text}>{props.description}</Text>
    </View>
  );
}

function iconImageRow(props) {
  return (
    <View flexDirection="row" alignSelf="flex-start" marginVertical={3}>
      <View alignSelf="flex-start" marginRight={10}>
        <MaterialCommunityIcons
          name={props.name}
          size={18}
          color={colors.dark}
        />
      </View>

      <View alignSelf="flex-start">
        <Svg width={100} height={100}>
          <ImageSvg
            width="100%"
            height="100%"
            preserveAspectRatio="xMinYMin stretch"
            href={{ uri: props.pic[0] }}
          />
        </Svg>
      </View>
    </View>
  );
}

function reviews(props) {
  const [likes, setLikes] = useState(0);
  const [dislikes, setDislikes] = useState(0);

  const updateLikes = () => {
    setLikes(likes + 1);
    notImplemented();
  };
  const updatedislikes = () => {
    setDislikes(dislikes + 1);
    notImplemented();
  };

  return (
    <View style={styles.reviewsContainer}>
      <TouchableOpacity onPress={() => updatedislikes()}>
        <View style={styles.review}>
          <View marginRight={5}>
            <MaterialCommunityIcons
              name={"thumb-down"}
              size={18}
              color={colors.dark}
            />
          </View>
          <Text style={styles.text}>{dislikes}</Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          updateLikes();
        }}
      >
        <View style={styles.review}>
          <View marginRight={5}>
            <MaterialCommunityIcons
              name={"thumb-up"}
              size={18}
              color={colors.dark}
            />
          </View>
          <Text style={styles.text}>{likes}</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}

function moreInfo(props) {
  const hasData = props.data.values.length > 0;
  return (
    <View
      style={{
        height: hasData ? chartHeight * 1.4 : 70,
        paddingVertical: 20,
      }}
    >
      {!hasData ? (
        <Text style={{ ...styles.text, alignSelf: "center" }}>
          Nenhum dado disponível
        </Text>
      ) : (
        <PluviometerGraphics
          chartHeight={chartHeight}
          values={props.data.values}
          labels={props.data.labels}
        />
      )}
    </View>
  );
}

function componentBody(props) {
  // NOTE: This code is refered to our local SQLite solution. Revise this when implement rest API.
  const pictures = JSON.parse(props.pictures);
  const date = props.date ? props.date : "implementando...";
  const address = props.address ? props.address : "Erro ao carregar endereço";

  return (
    <View style={styles.bodyRow}>
      <Image style={styles.bodyIcon} resizeMode="stretch" source={props.logo} />

      <View style={styles.bodyInfo}>
        <Text style={styles.bodyTitle}>{props.title}</Text>

        {iconTextRow({ name: "map-marker", description: address })}
        {iconTextRow({ name: "calendar", description: date })}
        {iconTextRow({ name: "account", description: "Usuário ativo" })}
        {pictures.length > 0 && iconImageRow({ name: "camera", pic: pictures })}
      </View>
    </View>
  );
}

function isPluviometer(name) {
  return name === "pluviometer" || name === "officialPluviometer";
}

function MapModal({showModal, setShowModal, markers}) {
  var currentMarker = undefined;
  if (markers && showModal != null && markers.has(showModal)) {
    currentMarker = markers.get(showModal);
  }

  if (currentMarker != undefined && showModal != null) {
  return (
    <SelfClosingModal
      style={{ position: "absolute" }}
      animationType="slide"
      transparent={true}
      showModal={showModal}
      setShowModal={setShowModal}
    >
      {topBar(setShowModal)}
      {componentBody(currentMarker)}
      {isPluviometer(currentMarker.name) ? moreInfo(currentMarker) : null}
      {!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null}
    </SelfClosingModal>
  );}
  else {
    return null;
  }
}

const styles = StyleSheet.create({
  bodyRow: {
    flexDirection: "row",
    alignSelf: "flex-start",
    alignContent: "space-between",
  },
  bodyTitle: {
    fontWeight: "700",
    fontSize: dimensions.text.secondary,
    marginBottom: 5,
  },
  bodyInfo: {
    flexDirection: "column",
    alignContent: "flex-start",
  },
  bodyIcon: {
    alignSelf: "flex-start",
    marginHorizontal: 20,
    height: 53,
    width: 53,
  },
  reviewsContainer: {
    flexDirection: "row",
    alignSelf: "flex-end",
    margin: 10,
  },
  review: {
    flexDirection: "row",
    alignSelf: "flex-end",
    alignContent: "space-around",
    marginHorizontal: 10,
  },
  topBar: {
    flexDirection: "row",
    alignSelf: "flex-end",
  },
  topBarIcon: {
    margin: 10,
  },
  text: {
    fontWeight: "500",
    fontSize: dimensions.text.default,
  },
  link: {
    alignSelf: "center",
    color: colors.lightBlue,
    fontWeight: "500",
    fontSize: dimensions.text.default,
  },
});

export default MapModal;