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

import React, { useState } from "react";
import { dimensions, screen_width } from "../config/dimensions";
import {
  View,
  StyleSheet,
  Text,
  Button,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import SelfClosingModal from "./SelfClosingModal";
import colors from "../config/colors";
import { FontAwesome5 } from "@expo/vector-icons";
import { MaterialIcons } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Shadow } from "react-native-shadow-2";
import assets from "../config/assets";

function DataMenuHeader({ setShowModal }) {
  return (
    <View
      style={{
        backgroundColor: colors.primary,
        height: 42,
        justifyContent: "center",
        flexDirection: "row",
        justifyContent: "space-between",
        paddingHorizontal: 16,
      }}
    >
      <Text style={styles.text}>DADOS</Text>

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

function DataOriginSelector({ dataOriginToShow, setDataOriginToShow }) {
  const bgToUse = (selected) =>
    dataOriginToShow == selected ? colors.secondary : colors.gray;

  return (
    <Shadow
      viewStyle={{ width: "100%", height: 40 }}
      offset={[0, 4]}
      distance={4}
      radius={0}
      startColor="rgba(0, 0, 0, 0.25)"
      paintInside={true}
    >
      <View
        style={{
          height: 40,
          justifyContent: "center",
          flexDirection: "row",
          justifyContent: "space-between",
          backgroundColor: colors.secondary,
        }}
      >
        <TouchableOpacity
          style={[styles.choicesBtn, { backgroundColor: bgToUse("oficial") }]}
          onPress={() => setDataOriginToShow("oficial")}
        >
          <MaterialIcons
            name="account-balance"
            size={24}
            color={colors.white}
            alignItems="center"
          />
          <Text style={[styles.text, { marginLeft: 12 }]}>OFICIAL</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.choicesBtn, { backgroundColor: bgToUse("citzen") }]}
          onPress={() => setDataOriginToShow("citzen")}
        >
          <FontAwesome5
            name="user-alt"
            size={22}
            color={colors.white}
            alignItems="center"
          />
          <Text style={[styles.text, { marginLeft: 12 }]}>CIDADÃO</Text>
        </TouchableOpacity>
      </View>
    </Shadow>
  );
}

// FIXME: Change icon values in the future 
const dataOptions = {
  oficial: [
    {
      name: "Área de suscetibilidade",
      code: "susceptibilityAreas",
      source: "CPRM",
      icon: assets.floodZones.FloodZonesIcon,
    },
    {
      name: "Pluviômetro automático",
      code: "automaticPluviometer",
      source: "Cemaden",
      icon: assets.floodZones.FloodZonesIcon,
    },
  ],
  citzen: [
    {
      name: "Risco de inundação",
      code: "floodRisk",
      source: null,
      icon: assets.floodZones.FloodZonesIcon,
    },
    {
      name: "Pluviômetro artesanal",
      code: "pluviometer",
      source: null,
      icon: assets.floodZones.FloodZonesIcon,
    },
    {
      name: "Intensidade de chuva",
      code: "rain",
      source: null,
      icon: assets.floodZones.FloodZonesIcon,
    },
    {
      name: "Área de alagamento",
      code: "floodZones",
      source: null,
      icon: assets.floodZones.FloodZonesIcon,
    },
    {
      name: "Água do rio",
      code: "riverFlood",
      source: null,
      icon: assets.floodZones.FloodZonesIcon,
    },
  ],
};

function Border() {
  return (
    <View
      style={{
        width: 0.95 * screen_width,
        alignSelf: "center",
        height: 2,
        borderRadius: 2,
        paddingHorizontal: 16,
        backgroundColor: colors.lightestGray,
      }}
    />
  );
}

function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option) {
  const item = dataOptionsToShow[dataOriginToShow][option.code];
  const dataOptionObject = {...dataOptionsToShow, [dataOriginToShow]:  {...dataOptionsToShow[dataOriginToShow], [option.code]: !item}};


  return (
    <View>
      <View
        style={{
          flex: 1,
          height: 76,
          flexDirection: "row",
          paddingTop: 16,
          alignItems: "center",
          paddingHorizontal: 16,
          paddingBottom: 16,
        }}
      >
        <option.icon width={34} height={24} />

        <View
          style={{
            flex: 1,
            marginLeft: 16,
            alignItems: "flex-start",
          }}
        >
          <Text style={styles.itensText}>{option.name}</Text>
          {option.source && (
            <Text
              style={[
                styles.itensText,
                { color: colors.subText, fontSize: 14 },
              ]}
            >
              Fonte: {option.source}
            </Text>
          )}
        </View>


        <TouchableOpacity
          onPress={() => {setDataOptionsToShow(dataOptionObject)}}
        >
          <View
            style={{
              alignContent: "flex-end",
              width: 100,
              height: 36,
              justifyContent: "center",
              borderRadius: 6,
              backgroundColor:  item  ? colors.activated : colors.notActivated,
            }}
          >
            <Text style={styles.text}>
              {item ? "ADICIONAR" : "REMOVER"}
            </Text>
          </View>
        </TouchableOpacity>
      </View>
      <Border />
    </View>
  );
}

function DataOriginOptions({ dataOriginToShow, dataOptionsToShow, setDataOptionsToShow }) {
  return (
    <View paddingTop={8} height={"100%"}>
      <ScrollView        >
        {dataOptions[dataOriginToShow].map((option) =>
          ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option)
        )}
      </ScrollView>
    </View>
  );
}

function DataMenuBody({ setShowModal }) {
  const [dataOriginToShow, setDataOriginToShow] = useState("oficial");
  const [dataOptionsToShow, setDataOptionsToShow] = useState({
    oficial: {
      automaticPluviometer: false,
      susceptibilityAreas: false,
    },
    citzen: {
      floodRisk: false,
      pluviometer: true,
      rain: false,
      floodZones: true,
      riverFlood: true,
    },
  });
  console.log(dataOptionsToShow)
  return (
    <View
      style={{
        height: "60%",
        backgroundColor: colors.white,
      }}
    >
      <DataMenuHeader setShowModal={setShowModal} />
      <DataOriginSelector
        dataOriginToShow={dataOriginToShow}
        setDataOriginToShow={setDataOriginToShow}
      />
      <DataOriginOptions
        dataOptionsToShow={dataOptionsToShow}
        dataOriginToShow={dataOriginToShow}
        setDataOptionsToShow={setDataOptionsToShow}
      />
    </View>
  );
}

export default function MapDataMenu(props) {
  const [showModal, setShowModal] = useState(null);
  return (
    <View>
      <Button
        title={"VISUALIZAR DADOS NO MAPA"}
        onPress={() => setShowModal(true)}
      />
      <SelfClosingModal
        animationType="slide"
        transparent={true}
        showModal={showModal}
        setShowModal={setShowModal}
      >
        <DataMenuBody setShowModal={setShowModal} />
      </SelfClosingModal>
    </View>
  );
}

const styles = StyleSheet.create({
  choicesBtn: {
    width: "50%",
    backgroundColor: colors.secondary,
    height: "100%",
    justifyContent: "center",
    paddingHorizontal: 12,
    alignItems: "center",
    justifyContent: "flex-start",
    flexDirection: "row",
  },
  itensText: {
    color: colors.black,
    fontWeight: "500",
    fontSize: 16,
  },
  text: {
    color: colors.white,
    alignSelf: "center",
    fontWeight: "500",
    fontSize: 16,
  },
  topBarIcon: {
    alignSelf: "center",
  },
});