import React from 'react'
import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react'

export const ModalBox = ({
    title, isOpen, onClose, children,
    showFooter = true, showCancel = true, showConfirm = true,
    textCancel = 'Cancel', textConfirm = 'OK',
    onConfirm = null, focusRef = null,
}) => {

    return (
        <Modal
            initialFocusRef={focusRef}
            isOpen={isOpen}
            onClose={onClose}
        >
            <ModalOverlay />
            <ModalContent>
                <ModalHeader>{title}</ModalHeader>
                <ModalCloseButton />

                <ModalBody pb={6}>
                    {children}
                </ModalBody>

                <ModalFooter display={showFooter ? 'flex' : 'none'}>
                    <Button
                        display={showConfirm ? 'flex' : 'none'}
                        colorScheme="blue"
                        onClick={() => {
                            onConfirm && onConfirm()
                            onClose()
                        }}
                        mr={3}
                    >
                        {textConfirm}
                    </Button>

                    <Button
                        display={showCancel ? 'flex' : 'none'}
                        onClick={onClose}
                    >
                        {textCancel}
                    </Button>
                </ModalFooter>
            </ModalContent>
        </Modal>
    )
}