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(props) {
  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={() => props.setIsVisible(!props.isVisible)}
      >
        <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() {
  return (
    <View style={styles.pluviometer_diary}>
      <PluviometerGraphics chartHeight={chartHeight} />
    </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.image}
      />

      <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 MapModal(props) {
  return (
    <SelfClosingModal
      animationType="slide"
      transparent={true}
      visible={props.isVisible}
      setVisible={props.setIsVisible}
    >
      {topBar(props)}
      {componentBody(props)}
      {props.name === "pluviometer" ? moreInfo(props) : null}
      {props.name !== "pluviometer" ? reviews(props) : null}
    </SelfClosingModal>
  );
}

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,
  },
  pluviometer_diary: {
    height: chartHeight * 1.4,
    paddingVertical: 20,
  },
});

export default MapModal;