import React, { useState } from "react";

import { View, StyleSheet, Text, Button, TouchableOpacity } 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";

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() {
  const [dataOriginToShow, setDataOriginToShow] = useState("oficial")
  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>
  );
}

function DataMenuBody({ setShowModal }) {
  return (
    <View
      style={{
        height: "60%",
        backgroundColor: colors.white,
      }}
    >
      <DataMenuHeader setShowModal={setShowModal} />
      <DataOriginSelector />
    </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"
  },
  text: {
    color: colors.white,
    alignSelf: "center",
    fontWeight: "500",
    fontSize: 16,
  },
  topBarIcon: {
    alignSelf: "center",
  },
});