import React, {useRef} from 'react';
import {
    AlertDialog,
    AlertDialogBody,
    AlertDialogContent,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogOverlay,
    Button,
} from '@chakra-ui/react';

type DialogProps = {
    isOpen: boolean;
    confirmText: string;
    headerText: string;
    confirmBtnText: string;
    cancelBtnText: string;
    callBack: (isConfirm: boolean) => void;
}

function ConfirmDialog(props: DialogProps) {
    const {
        isOpen,
        confirmText,
        headerText,
        confirmBtnText,
        cancelBtnText,
        callBack,
    } = props;
    const cancelRef = useRef<HTMLButtonElement>(null);

    return (
        <>
            <AlertDialog
                isOpen={isOpen}
                leastDestructiveRef={cancelRef}
                onClose={() => callBack(false)}
            >
                <AlertDialogOverlay>
                    <AlertDialogContent>
                        <AlertDialogHeader fontSize="lg" fontWeight="bold">
                            {headerText}
                        </AlertDialogHeader>

                        <AlertDialogBody>{confirmText}</AlertDialogBody>

                        <AlertDialogFooter>
                            <Button ref={cancelRef} onClick={() => callBack(false)}>
                                {cancelBtnText}
                            </Button>
                            <Button colorScheme="red" onClick={() => callBack(true)} ml={3}>
                                {confirmBtnText}
                            </Button>
                        </AlertDialogFooter>
                    </AlertDialogContent>
                </AlertDialogOverlay>
            </AlertDialog>
        </>
    );
}


ConfirmDialog.defaultProps = {
    isOpen: false,
    confirmText: 'Are you sure?',
    headerText: 'Confirm Action',
    confirmBtnText: 'Confirm',
    cancelBtnText: 'Cancel',
    callBack: null,
};

export default ConfirmDialog;