import {
  View,
  Text,
  Button,
  StyleSheet,
  Touchable,
  TouchableOpacity,
} from "react-native";
import { useAuth } from "../../contexts/auth_context";
import { CircleAvatar } from "../../components/circle_avatar/circle_avatar";
import {
  MaterialIcons,
  MaterialCommunityIcons,
  FontAwesome,
} from "@expo/vector-icons";
import { CustomTileButton } from "../../components/custom_tile_button/custom_tile_button";
import { router } from "expo-router";

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

export const AccountPage = () => {
  const { logout, user } = useAuth();
  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="Change my tastes"
          leadingIcon={<FontAwesome name="edit" size={24} color="black" />}
        /> */}
          
      </View>
      <CustomTileButton
            title="Logout"
            onPress={logout}
            leadingIcon={
              <MaterialIcons name="logout" size={24} color="black" />
            }
          />
    </View>
  );
};

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