cally/components/pages/settings/user_settings_views/UserOptions.tsx

import { Platform, StyleSheet } from "react-native";
import React, { useState } from "react";
import { MenuView } from "@react-native-menu/menu";
import { Dialog, Text, View, Button } from "react-native-ui-lib";
import MenuDotsIcon from "@/assets/svgs/MenuDotsIcon";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { useRemoveSubUser } from "@/hooks/firebase/useRemoveSubUser";
import UpdateUserDialog from "@/components/pages/settings/user_settings_views/UpdateUserDialog";

const UserOptions = ({ user }: { user: UserProfile }) => {
  const [visible, setVisible] = useState<boolean>(false);
  const { mutateAsync: removeSubUser } = useRemoveSubUser();
  const [updateUserDialogOpen, setUpdateUserDialogOpen] = useState(false);

  const handleDeleteUser = async () => {
    try {
      if (user.uid) await removeSubUser(user.uid);
    } catch (error) {
      console.error(error);
    } finally {
      setVisible(false);
    }
  };

  const handleOpenUpdateDialog = () => {
    setUpdateUserDialogOpen(true);
  }

  const handleCloseUpdateDialog = () => {
    setUpdateUserDialogOpen(false);
  }

  const menuOptions = [
    {
      id: "edit",
      title: "Edit User",
      onPress: () => console.log("Edit User here"),
      image: Platform.select({
        ios: "pencil.and.ellipsis.rectangle",
        android: "ic_menu_edit",
      }),
      imageColor: "#7300d4",
      titleColor: "#7300d4",
    },
    {
      id: "delete",
      title: "Delete User",
      attributes: {
        destructive: true,
      },
      image: Platform.select({
        ios: "trash",
        android: "ic_menu_delete",
      }),
    },
  ];

  return (
    <>
      <MenuView
        style={styles.menu}
        title="User options"
        onPressAction={({ nativeEvent }) => {
          switch (nativeEvent.event) {
            case "edit":
              handleOpenUpdateDialog();
              break;
            case "delete":
              setTimeout(() => setVisible(true), 300);
              break;
            default:
              break;
          }
        }}
        actions={menuOptions}
        shouldOpenOnLongPress={false}
      >
        <MenuDotsIcon />
      </MenuView>
      <Dialog
        visible={visible}
        containerStyle={styles.dialog}
        onDismiss={() => setVisible(false)}
      >
        <Text center style={styles.title}>
          Are you sure?
        </Text>
        <Text
          style={{
            fontSize: 18,
            fontFamily: "PlusJakartaSans_700Bold",
            color: "#979797",
            marginBottom: 20,
          }}
          center
        >
          This action will delete the {user.firstName}'s profile.
        </Text>
        <View row right gap-8 marginT-15>
          <Button
            label="Cancel"
            onPress={() => {
              setVisible(false);
            }}
            style={styles.cancelBtn}
            color="#999999"
            labelStyle={{ fontFamily: "Poppins_500Medium", fontSize: 13.53 }}
          />
          <Button
            label="Yes"
            onPress={handleDeleteUser}
            style={styles.confirmBtn}
            labelStyle={{ fontFamily: "PlusJakartaSans_500Medium" }}
          />
        </View>
      </Dialog>
      {updateUserDialogOpen && <UpdateUserDialog open={updateUserDialogOpen} handleClose={handleCloseUpdateDialog} profileData={user} />}
    </>
  );
};

const styles = StyleSheet.create({
  menu: {
    padding: 5,
  },
  confirmBtn: {
    backgroundColor: "#ff1637",
  },
  cancelBtn: {
    backgroundColor: "white",
  },
  dialog: {
    backgroundColor: "white",
    paddingHorizontal: 25,
    paddingTop: 25,
    paddingBottom: 17,
    borderRadius: 20,
  },
  title: {
    fontFamily: "Manrope_600SemiBold",
    fontSize: 22,
    marginBottom: 5,
  },
  text: {
    fontFamily: "PlusJakartaSans_400Regular",
    fontSize: 16,
    marginBottom: 0,
  },
});

export default UserOptions;