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

import './main-header.scss';

class MainHeader extends PureComponent {
  static propTypes = {
    /** @ignore */
    className: PropTypes.string,
    /** Make it fixed to the top */
    fixed: PropTypes.bool
  }

  static defaultProps = {
    className: undefined,
    fixed: false
  }

  static contextTypes = {
    layout: PropTypes.object
  }

  componentWillMount = () => {
    const { fixed } = this.props;
    if (this.context.layout) {
      this.context.layout.register('header', { fixed });
    }
  }

  render() {
    const { className, fixed, ...props } = this.props;
    const style = fixed ? 'fixed' : 'base';

    return (
      <header className={className} styleName={style} {...props} role="banner" />
    );
  }
}

export default MainHeader;
