import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

import './main-content-wrapper.scss';

class MainContentWrapper extends PureComponent {
  static propTypes = {
    /** @ignore */
    className: PropTypes.string
  }

  static defaultProps = {
    className: undefined
  }

  static contextTypes = {
    layout: PropTypes.object
  }

  componentWillMount = () => {
    if (this.context.layout) {
      this.context.layout.register('main-content', {});
    }
  }

  render() {
    const { layout: { config: { header, columnLeft, columnRight } } } = this.context;
    const { className, ...props } = this.props;

    const style = [];
    if (header && header.fixed) style.push('with-header');
    if (columnLeft && columnLeft.fixed) style.push('margin-left');
    if (columnRight && columnRight.fixed) style.push('margin-right');
    if (style.length === 0) style.push('base');

    return <main className={className} styleName={style.join(' ')} {...props} />;
  }
}

export default MainContentWrapper;
