cally/components/pages/settings/UserSettings.tsx

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

const UserSettings = () => {
  const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
  const [userView, setUserView] = useAtom(userSettingsView);
  const [onNewUserClick, setOnNewUserClick] = useState<(boolean)>(false);
  return (
    <AuthContextProvider>
      <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>
    </AuthContextProvider>
  );
};

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;