import { View, Text, TouchableOpacity } from "react-native-ui-lib";
import React, { useState } from "react";
import { Ionicons } from "@expo/vector-icons";
import { ScrollView, StyleSheet } from "react-native";
import MyProfile from "./user_settings_views/MyProfile";
import MyGroup from "./user_settings_views/MyGroup";
import { useAuthContext } from "@/contexts/AuthContext";

const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
  const [selectedView, setSelectedView] = useState<boolean>(true);
  return (
    <View>
      <ScrollView>
        <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
          <View row marginT-20 marginL-20 marginB-35 centerV>
            <Ionicons name="chevron-back" size={22} color="#979797" />
            <Text text70 color="#979797">
              Return to main settings
            </Text>
          </View>
        </TouchableOpacity>
        <View marginH-20>
          <Text text60R marginB-25>
            User Management
          </Text>
          <View style={styles.buttonSwitch} spread row>
            <TouchableOpacity
              onPress={() => setSelectedView(true)}
              centerV
              centerH
              style={selectedView == true ? styles.btnSelected : styles.btnNot}
            >
              <View>
                <Text text70 color={selectedView ? "white" : "black"}>
                  My Profile
                </Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => setSelectedView(false)}
              centerV
              centerH
              style={selectedView == false ? styles.btnSelected : styles.btnNot}
            >
              <View>
                <Text text70 color={!selectedView ? "white" : "black"}>
                  My Group
                </Text>
              </View>
            </TouchableOpacity>
          </View>
          {selectedView && <MyProfile />}
          {!selectedView && <MyGroup />}
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  buttonSwitch: {
    borderRadius: 50,
    width: "100%",
    backgroundColor: "#ebebeb",
    height: 45,
  },
  btnSelected: {
    backgroundColor: "#05a8b6",
    height: "100%",
    width: "50%",
    borderRadius: 50,
  },
  btnNot: {
    height: "100%",
    width: "50%",
    borderRadius: 50,
  },
});

export default UserSettings;