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

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

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

const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
  visible,
  onDismiss,
  onFirstYes,
  onConfirm,
  isDeleteFamily,
  householdName,
}) => {
  const [confirmationDialog, setConfirmationDialog] = useState<boolean>(false);
  const [input, setInput] = useState<string>("");
  const [isCorrect, setIsCorrect] = useState<boolean>(false);

  useEffect(() => {
    setInput("");
  }, [onDismiss, onConfirm])
  
  useEffect(() => {
    setIsCorrect(input !== "" && input === householdName);
  }, [input])
  

  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>
        {isDeleteFamily ? (
          <Text
            style={{
              fontSize: 18,
              fontFamily: "PlusJakartaSans_700Bold",
              color: "#979797",
              marginBottom: 20,
            }}
            center
          >
            This action will permanently delete all your family profiles and
            data, you won't be able to recover it!
          </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>
          {isDeleteFamily ? (
            <View>
              <Text style={styles.title}>Deleting family</Text>
              <Text style={styles.text}>
                Deleting the family will remove all profiles and data. This
                cannot be undone.
              </Text>
              <Text style={styles.subText}>
                Type the name of your household to confirm.
              </Text>
              <TextField
                value={input}
                onChangeText={(value) => {
                  setInput(value);
                }}
                style={[styles.txtBox, { marginTop: 5 }]}
              />
            </View>
          ) : (
            <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"
              disabled={!isDeleteFamily ? false : !isCorrect}
              onPress={() => {
                if(input === householdName)
                  onConfirm();

                setConfirmationDialog(false);
              }}
              style={!isDeleteFamily ? styles.confirmBtn : (isCorrect ? styles.confirmBtn : styles.confirmDisabled)}
              labelStyle={{ fontFamily: "PlusJakartaSans_500Medium" }}
            />
          </View>
        </View>
      </Dialog>
    </>
  );
};

const styles = StyleSheet.create({
  confirmBtn: {
    backgroundColor: "#ff1637",
  },
  cancelBtn: {
    backgroundColor: "white",
  },
  confirmDisabled: {
    backgroundColor: "#999999"
  },
  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,
  },
  subText: {
    fontFamily: "PlusJakartaSans_400Regular",
    fontSize: 12,
    marginBottom: 0,
    color: "#999999",
    marginTop: 15,
  },
  txtBox: {
    backgroundColor: "#fafafa",
    borderRadius: 10,
    borderWidth: 2,
    borderColor: "#cecece",
    padding: 15,
    height: 45,
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 13,
  },
});

export default DeleteProfileDialogs;