import React, { ReactNode } from 'react';
import cx from 'classnames';

interface Props {
  children?: ReactNode;
  isOpened?: boolean;
  onClose?: () => void;
  onOverlay?: () => void;
  centered?: boolean;
  extraClass?: string;
  contentExtraClass?: string;
  footer?: string | ReactNode;
  header?: string | ReactNode;
  withGradient?: boolean;
  withMobile?: boolean;
}

const Modal = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
  const { children, isOpened = false, onClose, centered = false, header, withMobile = false,
    footer = null, extraClass = '', contentExtraClass = '', onOverlay, withGradient } = props;

  const className = cx(
    'c-modal',
    'u-align--center',
    extraClass,
    { 'c-modal--opened': isOpened },
    { 'c-modal--centered': centered },
    { 'c-modal--with-mobile': withMobile },
  );

  const overlayClassName = cx('c-overlay', 'js-overlay-hit-area', { 'c-overlay--opened': isOpened });
  const contentClassNames = cx('c-modal__content', contentExtraClass);
  const footerClassName = cx('c-modal__footer', { 'c-modal__footer--gradient': withGradient });

  return (
    <>
      {onOverlay && <div className={overlayClassName} onClick={() => onOverlay()} />}
      <div className={className}>
        {onClose && <div className="c-modal__close js-x-button-hit-area" onClick={() => onClose()} />}
        <div className="u-position--relative">
          {header}
          <div className={contentClassNames} ref={ref}>
            {children}
          </div>
          {withGradient && <div className='c-modal__gradient' />}
        </div>
        {footer && <div className={footerClassName}>
          {footer}
        </div>}
      </div>
    </>
  );
});

export { Modal };