import {FloatingButton, 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";
import {useAtom, useSetAtom} from "jotai";
import {settingsPageIndex, userSettingsView} from "../calendar/atoms";
import PlusIcon from "@/assets/svgs/PlusIcon";

const UserSettings = () => {
    const setPageIndex = useSetAtom(settingsPageIndex);
    const [userView, setUserView] = useAtom(userSettingsView);
    const [onNewUserClick, setOnNewUserClick] = useState<(boolean)>(false);

    return (
        <View flexG>
            <ScrollView style={{paddingBottom: 20, minHeight: "100%"}}>
                <TouchableOpacity
                    onPress={() => {
                        setPageIndex(0);
                        setUserView(true);
                    }}
                >
                    <View row marginT-20 marginB-20 marginL-20 centerV>
                        <Ionicons
                            name="chevron-back"
                            size={14}
                            color="#979797"
                            style={{paddingBottom: 3}}
                        />
                        <Text
                            style={{fontFamily: "Poppins_400Regular", fontSize: 14.71}}
                            color="#979797"
                        >
                            Return to main settings
                        </Text>
                    </View>
                </TouchableOpacity>
                <View marginH-26 flexG style={{minHeight: "90%"}}>
                    <Text text60R marginB-25>
                        User Management
                    </Text>
                    <View style={styles.buttonSwitch} spread row>
                        <TouchableOpacity
                            onPress={() => setUserView(true)}
                            centerV
                            centerH
                            style={userView == true ? styles.btnSelected : styles.btnNot}
                        >
                            <View>
                                <Text
                                    style={styles.btnTxt}
                                    color={userView ? "white" : "black"}
                                >
                                    My Profile
                                </Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => setUserView(false)}
                            centerV
                            centerH
                            style={userView == false ? styles.btnSelected : styles.btnNot}
                        >
                            <View>
                                <Text
                                    style={styles.btnTxt}
                                    color={!userView ? "white" : "black"}
                                >
                                    My Group
                                </Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    {userView && <MyProfile/>}
                    {!userView && <MyGroup onNewUserClick={onNewUserClick} setOnNewUserClick={setOnNewUserClick}/>}
                </View>
            </ScrollView>
            {!userView && (
                <FloatingButton
                    fullWidth
                    hideBackgroundOverlay
                    visible
                    button={{
                        label: " Add a user device",
                        iconSource: () => <PlusIcon height={13} width={14}/>,
                        onPress: () => setOnNewUserClick(true),
                        style: styles.bottomButton,
                        labelStyle: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
                    }}
                />
            )}
        </View>
    );
};

const styles = StyleSheet.create({
    bottomButton: {
        position: "absolute",
        bottom: 15,
        marginHorizontal: 28,
        width: 337,
        backgroundColor: "#e8156c",
        height: 53.26,
    },
    buttonSwitch: {
        borderRadius: 50,
        width: "100%",
        backgroundColor: "#ebebeb",
        height: 45,
    },
    btnSelected: {
        backgroundColor: "#05a8b6",
        height: "100%",
        width: "50%",
        borderRadius: 50,
    },
    btnTxt: {
        fontFamily: "Manrope_500Medium",
        fontSize: 15,
    },
    btnNot: {
        height: "100%",
        width: "50%",
        borderRadius: 50,
    },
    title: {fontFamily: "Manrope_600SemiBold", fontSize: 18},
});

export default UserSettings;