import {Text, TouchableOpacity, View} 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";

const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
    const [selectedView, setSelectedView] = useState<boolean>(true);
    return (
        <View flexG>
            <ScrollView style={{paddingBottom: 20, minHeight: "100%"}}>
                <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 flexG style={{minHeight: "90%"}}>
                    <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;