cally/components/pages/settings/user_components/DeleteProfileDialogs.tsx

import React, { useState } from "react";
import { Dialog, Button, Text, View } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { Feather } from "@expo/vector-icons";
import {useDeleteUser} from "@/hooks/firebase/useDeleteUser";

interface ConfirmationDialogProps {
  visible: boolean;
  onDismiss: () => void;
  onFirstYes: () => void;
  onConfirm: () => void;
}

const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
  visible,
  onDismiss,
  onFirstYes,
  onConfirm,
}) => {
  const [confirmationDialog, setConfirmationDialog] = useState<boolean>(false);

  return (
    <>
      <Dialog
        visible={visible}
        onDismiss={onDismiss}
        containerStyle={styles.dialog}
      >
        <View centerH>
          <Feather name="alert-triangle" size={70} color="#ff1637" />
        </View>
        <Text center style={styles.title}>
          Are you sure?
        </Text>
        <Text
          style={{
            fontSize: 18,
            fontFamily: "PlusJakartaSans_700Bold",
            color: "#979797",
            marginBottom: 20,
          }}
          center
        >
          This action will permanently delete all your data, you won't be able
          to recover it!
        </Text>
        <View centerV></View>
        <View row right gap-8>
          <Button
            label="Cancel"
            onPress={onDismiss}
            style={styles.cancelBtn}
            color="#999999"
            labelStyle={{ fontFamily: "Poppins_500Medium", fontSize: 13.53 }}
          />
          <Button
            label="Yes"
            onPress={() => {
              setTimeout(() => setConfirmationDialog(true), 300);
              onFirstYes();
            }}
            style={styles.confirmBtn}
            labelStyle={{ fontFamily: "PlusJakartaSans_500Medium" }}
          />
        </View>
      </Dialog>
      <Dialog
        visible={confirmationDialog}
        onDismiss={() => setConfirmationDialog(false)}
        containerStyle={styles.dialog}
      >
        <View center paddingH-10 paddingT-15 paddingB-5>
          <Text style={styles.title}>
            We're sorry to see you go, are you really sure you want to delete
            everything?
          </Text>
          <View row right gap-8 marginT-15>
            <Button
              label="Cancel"
              onPress={() => {
                setConfirmationDialog(false);
              }}
              style={styles.cancelBtn}
              color="#999999"
              labelStyle={{ fontFamily: "Poppins_500Medium", fontSize: 13.53 }}
            />
            <Button
              label="Yes"
              onPress={() => {
                onConfirm();
                setConfirmationDialog(false);
              }}
              style={styles.confirmBtn}
              labelStyle={{ fontFamily: "PlusJakartaSans_500Medium" }}
            />
          </View>
        </View>
      </Dialog>
    </>
  );
};

const styles = StyleSheet.create({
  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 DeleteProfileDialogs;