import React, { useContext, useState } from "react";
import { Text, 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 } from "@expo/vector-icons";
import colors from "../config/colors";
import ConfirmationModal from "../components/ConfirmationModal";
import utils from "../config/utils";

function UserHeader({ name, fone }) {
  const index  = utils.hashPhoneNumber(fone) % assets.avatar.length || 2
  const Avatar = assets.avatar[index];

  return (
    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: name ? "flex-start" : "center" }}>
      <Avatar width={60} height={60}/>
      <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 isRegistered = user?.username != null;
  const [showLog, setShowLog] = useState(false);

  console.log(user);
  const logout = () => {
    setShowLog(false)
    setUser(true);
    props.navigation.navigate("Home")
    authStorage.removeToken();
    authStorage.removeUser();
  };

  const activationActions = () => {
    if (user?.providerActivationKey)
      props.navigation.navigate("ActivateInstitutionShowCode");
    else 
      props.navigation.navigate("ActivateInstitutionCode");
  };

  const showActivation = () => {
    if (!isRegistered)
      return false
    else if (user.role === "ROLE_CLIENT")
      return !user.active
    else
      return true
  }

  const profileItems = [
    {
      icon: "account",
      show: isRegistered,
      IconProvider: MaterialCommunityIcons,
      title: "Cadastrar pluviômetro",
      onPress: () => {
        props.navigation.navigate("PluviometerRegister");
      },
    },
    {
      icon: "account",
      show: !isRegistered,
      IconProvider: MaterialCommunityIcons,
      title: "Cadastra-se",
      onPress: () => {
        setUser(false);
      },
    },
    {
      icon: "bank",
      show: showActivation(),
      // show: true,
      IconProvider: MaterialCommunityIcons,
      title: "ATIVAR INSTITUIÇÃO",
      onPress: () => {
        activationActions();
      },
    },
    {
      icon: "information-outline",
      show: true,
      IconProvider: MaterialCommunityIcons,
      title: "SOBRE O PROJETO",
      onPress: () => {
        props.navigation.navigate("Abbout");
      },
    },
    {
      icon: "logout",
      show: isRegistered,
      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}/>

          <View style={{ marginTop: 24 }}>
            {profileItems.map(
              ({ icon, IconProvider, title, onPress, show }) =>
                show && (
                  <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;