import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { useAuth } from "../../auth/contexts/auth_context";
import { CircleAvatar } from "../../common/components/circle_avatar";
import {
  MaterialIcons,
  MaterialCommunityIcons,
  FontAwesome,
} from "@expo/vector-icons";
import { CustomTileButton } from "../../common/components/custom_tile_button";
import { router } from "expo-router";
import { LIGHT_THEME } from "../../common/const/theme";
import { useRef, useState } from "react";
import Modal from "react-native-modal";
import { set } from "react-hook-form";
import { AntDesign } from "@expo/vector-icons";
import RNPickerSelect from "react-native-picker-select";
import { AvailableLanguages, Languages } from "../../lang/translations";
import i18n from "i18next";
import { useTranslation } from "react-i18next";
import { useLang } from "../../lang/hooks/useLang";

//TODO: Add source to CircleAvatar
const source = require("../../../assets/avatar.png");

export const AccountPage = () => {
  const { logout, user } = useAuth();
  const LANG = useTranslation();
  const [isModalVisible, setModalVisible] = useState(false);
  return (
    <View style={styles.container}>
      <View style={styles.profilePhotoContainer}>
        <CircleAvatar size={120} source={source} />
        <Text style={styles.user_name}>
          {user?.name + " " + user?.lastName}
        </Text>
      </View>

      <View
        style={{
          flex: 2,
        }}
      >
        <CustomTileButton
          title="Edit user data"
          leadingIcon={
            <MaterialCommunityIcons
              name="account-edit"
              size={24}
              color="black"
            />
          }
          onPress={() => router.push("/profile/edit")}
        />
        <CustomTileButton
          title={LANG.t("accountScreen.changePasswordButton")}
          leadingIcon={<MaterialIcons name="vpn-key" size={24} color="black" />}
          onPress={() => router.push("/profile/change_password")}
        />
        <CustomTileButton
          title={LANG.t("accountScreen.changeLanguageButton")}
          leadingIcon={<FontAwesome name="language" size={24} color="black" />}
          onPress={() => setModalVisible(true)}
        />
        <ChangeLanguageModal
          isVisible={isModalVisible}
          onClose={() => setModalVisible(false)}
        />
        <CustomTileButton
          //TODO: Add multilanguage support
          title={LANG.t("accountScreen.changeMyInterestsButton")}
          leadingIcon={<FontAwesome name="edit" size={24} color="black" />}
          onPress={() => router.push("/profile/interests")}
        />
        <CustomTileButton
          title={LANG.t("accountScreen.aboutUsButton")}
          onPress={() => router.push("/about_us")}
          leadingIcon={
            <MaterialCommunityIcons
              name="information"
              size={24}
              color="black"
            />
          }
        />
      </View>
      <CustomTileButton
        title={LANG.t("accountScreen.logoutButton")}
        onPress={logout}
        leadingIcon={<MaterialIcons name="logout" size={24} color="black" />}
      />
    </View>
  );
};

interface ChangeLanguageModalProps {
  onClose: () => void;
  isVisible: boolean;
}

const ChangeLanguageModal = ({
  onClose,
  isVisible,
}: ChangeLanguageModalProps) => {
  const { changeLanguage } = useLang();
  const [selectedLanguage, setSelectedLanguage] = useState<Languages | null>(
    null
  );
  const onSave = () => {
    changeLanguage(selectedLanguage || Languages.SPANISH);
    onClose();
  };
  return (
    <Modal isVisible={isVisible} style={modalStyles.modal}>
      <View style={modalStyles.modalContainer}>
        <AntDesign
          name="close"
          size={30}
          color="red"
          style={modalStyles.closeButton}
          onPress={onClose}
        />
        <Text style={modalStyles.selectLanguageText}>Select Language</Text>
        <RNPickerSelect
          onValueChange={(value) => setSelectedLanguage(value)}
          items={AvailableLanguages.map((lang) => ({
            label: lang.value,
            value: lang.key,
          }))}
        />
        <TouchableOpacity onPress={onSave} style={modalStyles.saveBtn}>
          <Text style={modalStyles.saveBtnText}>Save</Text>
        </TouchableOpacity>
      </View>
    </Modal>
  );
};

const modalStyles = StyleSheet.create({
  modal: {
    justifyContent: "center",
    alignItems: "center",
  },
  modalContainer: {
    width: "90%",
    aspectRatio: 1,
    backgroundColor: "white",
    borderRadius: 10,
    padding: 20,
    justifyContent: "space-around",
    alignItems: "center",
  },
  closeButton: {
    position: "absolute",
    top: 10,
    right: 10,
  },
  selectLanguageText: {
    fontSize: 20,
    fontWeight: "bold",
  },
  saveBtn: {
    backgroundColor: LIGHT_THEME.color.primary,
    padding: 10,
    borderRadius: 20,
    height: 40,
    width: "70%",
    justifyContent: "center",
    alignItems: "center",
  },
  saveBtnText: {
    color: "white",
    fontWeight: "bold",
  },
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    padding: 20,
    backgroundColor: LIGHT_THEME.color.background,
  },
  profilePhotoContainer: {
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    flex: 1,
  },
  user_name: {
    fontSize: 18,
    fontWeight: "bold",
  },
});
