import React from 'react';
import PropTypes from 'prop-types';

// import child components
import PageHeader from '../PageHeader';
import PublishState from '../../atoms/text/PublishState';

import './style.css';

var IllustratedHeader = function IllustratedHeader(illustratedHeader) {
  var bgInfo = illustratedHeader.bgInfo,
      bgImage = illustratedHeader.bgImage,
      inverted = illustratedHeader.inverted,
      category = illustratedHeader.category,
      pageHeader = illustratedHeader.pageHeader,
      publishState = illustratedHeader.publishState,
      children = illustratedHeader.children;

  var imageAlt = bgInfo || '';
  var pageHeaderProps = pageHeader;
  var illustratedHeaderClass = inverted ? 'ma__illustrated-header--inverted' : '';
  return React.createElement(
    'section',
    { className: 'ma__illustrated-header ' + illustratedHeaderClass },
    React.createElement(
      'div',
      { className: 'ma__illustrated-header__container' },
      React.createElement(
        'div',
        { className: 'ma__illustrated-header__content' },
        publishState && publishState.text && React.createElement(
          'div',
          { className: 'ma__page-header__publish-state' },
          React.createElement(PublishState, publishState)
        ),
        React.createElement(
          'div',
          { className: 'ma__illustrated-header__category', 'aria-hidden': 'true' },
          category
        ),
        React.createElement(PageHeader, pageHeaderProps),

        // Allows IllustratedHeader to render custom children component (this feature is used in rideshare report and it's not in Mayflower PatternLab)
        children
      )
    ),
    bgImage ? React.createElement('div', {
      style: { backgroundImage: 'url(' + bgImage + ')' },
      className: 'ma__illustrated-header__image',
      role: 'img',
      'aria-label': imageAlt
    }) : React.createElement('div', { className: 'ma__illustrated-header__image ma__illustrated-header__image--empty' })
  );
};

IllustratedHeader.propTypes = process.env.NODE_ENV !== "production" ? {
  /** background image aria label */
  bgInfo: PropTypes.string,
  /** background image url */
  bgImage: PropTypes.string,
  /** invert to change style */
  inverted: PropTypes.bool,
  /** category prefix text rendered in all caps above the page header title */
  category: PropTypes.string,
  /** render PageHeader component @organisms/PageHeader */
  pageHeader: PropTypes.shape(PageHeader.propTypes)
} : {};

export default IllustratedHeader;