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

type ModalWindowProps = {
  children:ReactNode,
  bgColor?: string,
  isOpen: boolean,
  onClose: any,
  hasOverlay?: boolean,
  title?: string,
  hasCancelButton?: boolean,
  cancelButtonText?: string,
  cancelButtonVariant?: string,
  cancelButtonAction?: VoidFunction,
  hasPrimarybutton?: boolean,
  primaryButtonText?: string,
  primaryButtonAction?: VoidFunction,
  isPrimaryButtonDisabled?: boolean,
  mainContentAlignment?: any,
  footerContentAlignment?: any,
  spreadButtons?: boolean, // a prop to align the buttons width with the component width
}

export const ModalWindow:FC<ModalWindowProps> = ({
  children,
  bgColor = 'white',
  onClose,
  isOpen,
  hasOverlay = true,
  title,
  hasCancelButton = true,
  cancelButtonText='Cancel',
  cancelButtonVariant,
  cancelButtonAction,
  hasPrimarybutton,
  primaryButtonText='Apply',
  primaryButtonAction,
  isPrimaryButtonDisabled = false,
  mainContentAlignment = 'flex-start',
  footerContentAlignment = 'flex-start',
  spreadButtons = false
}) => (
  <Modal
    isOpen={isOpen} onClose={onClose}
  >
    {hasOverlay && <ModalOverlay/>}
    <ModalContent bg={bgColor}>
      {title && <ModalHeader>{title}</ModalHeader>}
      <ModalCloseButton />

      <ModalBody justifyContent={'center'} pt={!title ? '10' : '0'}>
        <Flex justify={mainContentAlignment}>
          {children}
        </Flex>
      </ModalBody>
      <Flex
      >
        <ModalFooter w={'100%'} justifyContent={spreadButtons ? 'space-between': footerContentAlignment}>
          <Box mr={2} width={spreadButtons? '50%' : ''}>
            {
              hasPrimarybutton &&
              <Button
                width={'100%'}
                flexGrow={spreadButtons ? 1: 0}
                variant={'primary'}
                onClick={primaryButtonAction}
                disabled={isPrimaryButtonDisabled}
              >
                {primaryButtonText}
              </Button>
            }
          </Box>

          <Box width={spreadButtons? '50%' : ''}>
            {
              hasCancelButton &&
                <Button
                  width={'100%'}
                  variant={cancelButtonVariant}
                  onClick={cancelButtonAction || onClose}
                  flexGrow={spreadButtons ? 1 : 0}
                >
                  {cancelButtonText}
                </Button>
            }
          </Box>
        </ModalFooter>
      </Flex>
    </ModalContent>
  </Modal>
)