import React, { PropTypes } from 'react';

const propTypes = {
  mod: PropTypes.string, // class added to all elements
  className: PropTypes.string, // class added to top level element only
  title: PropTypes.any, // the title for the modal
  outerClickCloses: PropTypes.bool, // Should a click on the outer background close the modal
  closeHandler: PropTypes.func.isRequired, // function for close 'x' or optional background click
}

const defaultProps = {
  mod: '',
  className: '',
  title:'Modal Title',
  outerClickCloses: true
};

const FlyModal = ({ mod, className, title, outerClickCloses, closeHandler, children }) => (
  <div 
    className={`flymodal ${mod} ${className}`} 
    onClick={!!outerClickCloses ? closeHandler : null}
  >
    <div className={`flymodal-content ${mod}`} onClick={e => e.stopPropagation()}>

      <div className={`flymodal-content-header ${mod}`}>
        <span className={`flymodal-content-header-title ${mod}`}>{title}</span>
        <button 
          className={`flymodal-content-closebtn btnicon ${mod}`} 
          onClick={closeHandler}
        >
          <i className="mdi mdi-close"/>
        </button>
      </div>

      <div className={`flymodal-content-body ${mod}`}>
        {children}
      </div>

    </div>
  </div>
);

FlyModal.displayName = 'FlyModal';
FlyModal.propTypes = propTypes;
FlyModal.defaultProps = defaultProps;

export default FlyModal;