/**
*
* ImagePreview
*
*/

import PropTypes from 'prop-types';

import React from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import { Spin } from 'antd';
import messages from './messages';
import './_imagePreview.scss';

class ImagePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <div className={this.props.show ? "modal-image-preview-wrapper show-image-preview" : "modal-image-preview-wrapper hide-image-preview"}>
        <div id="image-preview-container">
          <div className="image-preview-header">
            <div className="heading-title">
              {this.props.header}
            </div>
            <div id="box-actions" style={{ float: 'right' }} onClick={this.props.handleClose}>
              <i className="material-icons close-image-preview"><FormattedMessage {...messages.close} /></i>
            </div>
          </div>

          <div id="image-preview-content">
            <Spin spinning={this.props.isLoading}>
              {this.props.content}
            </Spin>
          </div>
        </div>
      </div>
    );
  }
}

ImagePreview.propTypes = {
  header: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.string,
  ]).isRequired,
  content: PropTypes.element.isRequired,
  show: PropTypes.bool,
  handleClose: PropTypes.func.isRequired,
  isLoading: PropTypes.bool,
};

export default injectIntl(ImagePreview);
