import PropTypes from 'prop-types';
import React from 'react';
import './_slideBox.scss';

class SlideBox extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <div className={this.props.show ? "modal-slidebox-wrapper show-slidebox" : "modal-slidebox-wrapper hide-slidebox"}>
        <div id="slidebox-container" style={{ width: `${this.props.width}vw`, left: `${100 - this.props.width}vw`}}>
          <div className="slidebox-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-slidebox">close</i>
            </div>
          </div>

          <div id="slidebox-content">
            {this.props.isLoading ? <div style={{height: '100%', lineHeight: '90vh', textAlign: 'center', fontSize: '18px', fontFamily: "open-sans"}}>{this.props.loadingText}</div> : this.props.content}
          </div>
        </div>
      </div>
    );
  }
}

SlideBox.defaultProps = {
  show: false,
  width: 40,
  loadingText: 'loading',
  isLoading: false,
};

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

export default SlideBox;
