import {
  Button,
  FloatingButton,
  Text,
  TouchableOpacity,
  View,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { Ionicons } from "@expo/vector-icons";
import { Dimensions, 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 && (
        <View marginH-28>
          <Button
            style={styles.bottomButton}
            labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
            label=" Add a user device"
            iconSource={() => <PlusIcon height={13} width={14} />}
            onPress={() => setOnNewUserClick(true)}
          />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  bottomButton: {
    position: "absolute",
    bottom: 15,
    marginHorizontal: 0,
    width: "100%",
    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;