import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Modal, { defaultModalVariant, modalVariants } from '../Modal';

class LegacyModal extends Component {
  static propTypes = {
    /** Modal contents displayed over underlay, no styling/wrapper provided */
    content: PropTypes.any.isRequired,
    header: PropTypes.any,
    footer: PropTypes.any,
    /** Control whether to show the modal: this allows internal entering/exiting logic for transitions */
    show: PropTypes.bool.isRequired,
    /** If provided, it is invoked for escape key or underlay click interactions. If omitted, the modal dialog does not respond to these interactions: you have to provide a way of closing it from the modal dialog content (an interaction that will toggle the `show` prop) . */
    onExit: PropTypes.func,
    /** A11y-enabled modal title */
    title: PropTypes.string.isRequired,

    verticalDialogOffset: PropTypes.string,
    verticalAlign: PropTypes.string,

    /** color variant of the underlay */
    variant: PropTypes.oneOf(modalVariants),
  };
  static defaultProps = {
    variant: defaultModalVariant,
    onExit: undefined,
    verticalAlign: 'middle',
    verticalDialogOffset: null,
    header: null,
    footer: null,
  };

  render() {
    const { content, header, footer, ...props } = this.props;
    const cssClassName =
      React.Children.toArray(this.props.footer).length > 1
        ? 'LegacyModal-footer--multipleItems'
        : 'LegacyModal-footer--singleItem';
    return (
      <Modal {...props}>
        <div className="LegacyModal-container">
          {header && <div className="LegacyModal-header u-h2">{header}</div>}
          <div className="LegacyModal-content">{content}</div>
          {footer && <div className={`LegacyModal-footer ${cssClassName}`}>{footer}</div>}
        </div>
      </Modal>
    );
  }
}

export default LegacyModal;