import React, { useContext, useState } from "react";
import { Text, Image, View, StyleSheet, ScrollView } from "react-native";
import Screen from "../components/Screen";
import { AuthContext } from "../auth/context";
import authStorage from "../auth/storage";
import { TouchableOpacity } from "react-native-gesture-handler";
import assets from "../config/assets";
import { MaterialCommunityIcons, FontAwesome } from "@expo/vector-icons";
import colors from "../config/colors";
import ConfirmationModal from "../components/ConfirmationModal";


function UserHeader({ name, fone }) {
  return (
    <View style={{ flexDirection: "row", alignItems: "center" }}>
      <Image
        style={{ width: 70, height: 70 }}
        source={require("../assets/rain/chuva_peq.png")}
      />
      <View style={{ marginLeft: 16 }}>
        <Text style={[styles.text, { fontWeight: "bold" }]}>{name}</Text>
        <Text style={styles.text}>{fone}</Text>
      </View>
    </View>
  );
}

function ProfileItensList({ icon, IconProvider, title, onPress }) {
  return (
    <View>
      <View
        style={{
          height: 1,
          backgroundColor: colors.separatorGray,
        }}
      ></View>

      <TouchableOpacity onPress={onPress}>
        <View
          style={{
            marginVertical: 16,
            flexDirection: "row",
            alignItems: "center",
          }}
        >
          <IconProvider name={icon} size={18} color={colors.dark} />
          <Text
            style={{
              fontSize: 16,
              marginLeft: 16,
              textTransform: "uppercase",
              fontWeight: "500",
            }}
          >
            {title}
          </Text>
          <View
            style={{
              alignItems: "flex-end",
              flex: 1,
            }}
          >
            <MaterialCommunityIcons
              name={"chevron-right"}
              size={20}
              color={colors.dark}
            />
          </View>
        </View>
      </TouchableOpacity>
    </View>
  );
}

function AccountScreen(props) {
  const { user, setUser } = useContext(AuthContext);
  const [ showLog, setShowLog ] = useState(false);

  const logout = () => {
    setUser(null);
    authStorage.removeToken();
  };

  const profileItems = [
    {
      icon: "account",
      IconProvider: MaterialCommunityIcons,
      title: "Cadastrar pluviômetro",
      onPress: () => {
        props.navigation.navigate("PluviometerRegister");
      },
    },
    {
      icon: "institution",
      IconProvider: FontAwesome,
      title: "ATIVAR INSTITUIÇÃO",
      onPress: () => {
        props.navigation.navigate("ActivateInstitutionCode");
      },
    },
    {
      icon: "information-outline",
      IconProvider: MaterialCommunityIcons,
      title: "SOBRE O PROJETO",
      onPress: () => {
        props.navigation.navigate("Abbout");
      },
    },
    {
      icon: "logout",
      IconProvider: MaterialCommunityIcons,
      title: "sair",
      onPress: () => {
        setShowLog(true)
      },
    },
    // {
    //   icon: "trash-can",
    //   IconProvider: MaterialCommunityIcons,
    //   title: "DESATIVAR CONTA",
    //   onPress: () => {
    //     console.log("7");
    //   },
    // },
  ];

  return (
    <Screen>
      <ScrollView>
        <View
          style={{
            padding: 16,
          }}
        >
          <UserHeader name={user.nickname} fone={user.username} image={"1"} />

          <View style={{ marginTop: 24 }}>
            {profileItems.map(({ icon, IconProvider, title, onPress }) => (
              <View key={title}>
                <ProfileItensList
                  icon={icon}
                  IconProvider={IconProvider}
                  title={title}
                  onPress={onPress}
                />
              </View>
            ))}
          </View>
          <ConfirmationModal
            show={showLog}
            title="SAIR"
            description="Você tem certeza que deseja sair?"
            confirmationLabel="SIM"
            declineLabel="NÃO"
            onConfirm={logout}
            onDecline={() => setShowLog(false)}
          />
        </View>
      </ScrollView>
    </Screen>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
  },
});

export default AccountScreen;