import { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Dialog, Transition } from '@headlessui/react';
import classNames from 'classnames';

function Modal(props) {
  return (
    <Transition appear show={props.showModal} as={Fragment}>
      <Dialog as='div' className='fixed inset-0 z-10 overflow-y-auto' onClose={props.onClose}>
        <div className='min-h-screen px-4 text-center'>
          <Transition.Child
            as={Fragment}
            enter='ease-out duration-300'
            enterFrom='opacity-0'
            enterTo='opacity-100'
            leave='ease-in duration-200'
            leaveFrom='opacity-100'
            leaveTo='opacity-0'
          >
            <Dialog.Overlay className='fixed inset-0 bg-black opacity-70' />
          </Transition.Child>

          {/* This element is to trick the browser into centering the modal contents. */}
          <span className='inline-block h-screen align-middle' aria-hidden='true'>
            &#8203;
          </span>

          <Transition.Child
            as={Fragment}
            enter='ease-out duration-300'
            enterFrom='opacity-0 scale-95'
            enterTo='opacity-100 scale-100'
            leave='ease-in duration-200'
            leaveFrom='opacity-100 scale-100'
            leaveTo='opacity-0 scale-95'
          >
            <div
              className={classNames(
                'inline-block w-full max-w-md overflow-hidden rounded-2xl bg-white shadow-xl',
                'my-8 transform p-3 text-right align-middle transition-all'
              )}
            >
              {props.showCloseButton && (
                <button
                  className={
                    'absolute top-0 left-0 z-10 float-left mr-auto border-0 bg-transparent p-1 text-3xl font-semibold' +
                    'leading-none text-black opacity-50 outline-none focus:outline-none'
                  }
                  type='button'
                  onClick={props.onClose}
                >
                  <span
                    className={
                      'block flex h-12 w-12 items-center justify-center bg-transparent text-2xl text-black ' +
                      'opacity-50 outline-none focus:outline-none'
                    }
                  >
                    ×
                  </span>
                </button>
              )}

              {props.header && (
                <Dialog.Title
                  as='h3'
                  className='mb-4 text-center text-lg font-medium leading-6 text-gray-900'
                >
                  {props.header}
                </Dialog.Title>
              )}

              <div className='p-3'>
                <div>
                  <div className='text-gray-500'>{props.body}</div>
                </div>
              </div>

              <div className='mt-4'>{props.footer}</div>
            </div>
          </Transition.Child>
        </div>
      </Dialog>
    </Transition>
  );
}

Modal.defaultProps = {
  showCloseButton: true
};

Modal.propTypes = {
  showModal: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  header: PropTypes.node,
  body: PropTypes.node.isRequired,
  footer: PropTypes.node.isRequired,
  showCloseButton: PropTypes.bool
};

export default Modal;
