'use strict';

var React = require('react');
var moment = require('./moment-aca40de1.js');
var urlFor = require('./urlFor.js');
var entities = require('./entities-df1aed86.js');
var AuthorComponent = require('./AuthorComponent-39b37d84.js');
var index = require('./index-eadd5035.js');
require('./_commonjsHelpers-06173234.js');
require('./slicedToArray-067dd3bc.js');
require('./web.dom.iterable-d98303e0.js');
require('./core.get-iterator-method-5643aa10.js');
require('./index-d48b231c.js');
require('react-dom');
require('prop-types');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var OncliveLargeHero = function OncliveLargeHero(props) {
  var removeTimeStamp = props.removeTimeStamp;

  var topArticle = props.dataRecord[0];
  var middleArticles = props.dataRecord.slice(1, 3);
  var subArticles = props.dataRecord.slice(3, props.dataRecord.length);
  var client = props.client;


  var topArticleThumbnail = '';
  var topArticleAltText = topArticle.title;
  if (topArticle.thumbnail && topArticle.thumbnail.asset) {
    topArticleThumbnail = urlFor({ client: client, source: topArticle.thumbnail.asset, imageWidth: 550 });

    topArticleAltText = topArticle.thumbnail.asset.originalFileName;
  } else if (props.thumbnail) {
    topArticleThumbnail = props.thumbnail;
  }

  return React__default['default'].createElement(
    'div',
    { className: 'article-hero-container' },
    React__default['default'].createElement(
      'div',
      { className: 'top-outer' },
      React__default['default'].createElement(
        'a',
        { href: '/view/' + topArticle.url.current, className: 'top-article' },
        React__default['default'].createElement(
          'figure',
          null,
          React__default['default'].createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
        ),
        React__default['default'].createElement(
          'div',
          { className: 'top-article--body' },
          React__default['default'].createElement(
            'h1',
            null,
            topArticle.title
          ),
          React__default['default'].createElement(
            'p',
            null,
            moment.moment(topArticle.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM DD, YYYY hh:mma')
          ),
          React__default['default'].createElement(
            'p',
            { className: 'top-article-summary' },
            entities.clean_html_1(topArticle.summary)
          )
        )
      ),
      React__default['default'].createElement(
        'div',
        { className: 'sub-articles-container middle-single' },
        middleArticles && middleArticles.map(function (article, index$1) {
          var articleThumbnail = '';
          var articleAltText = article.title;
          if (article.thumbnail && article.thumbnail.asset) {
            articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });
            articleAltText = article.thumbnail.asset.originalFileName;
          } else if (props.thumbnail) {
            articleThumbnail = props.thumbnail;
          }
          return React__default['default'].createElement(
            'div',
            { key: index$1, className: 'sub-article' },
            React__default['default'].createElement(
              'a',
              { href: '/view/' + article.url.current },
              React__default['default'].createElement(
                'figure',
                null,
                React__default['default'].createElement('img', { src: articleThumbnail, alt: articleAltText })
              )
            ),
            React__default['default'].createElement(
              'div',
              { className: 'sub-article--body' },
              React__default['default'].createElement(
                'a',
                { href: '/view/' + article.url.current },
                React__default['default'].createElement(
                  'h2',
                  null,
                  article.title
                )
              ),
              React__default['default'].createElement('div', null),
              moment.moment(article.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM Do YYYY, h:mma'),
              article.authorMapping && article.authorMapping.length > 0 && React__default['default'].createElement(
                'div',
                { className: 'author-wrapper' },
                React__default['default'].createElement(
                  index.LazyLoad,
                  { height: 50 },
                  React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: article.authorMapping })
                )
              )
            )
          );
        })
      )
    ),
    React__default['default'].createElement(
      'div',
      { className: 'sub-outer-container' },
      React__default['default'].createElement(
        'div',
        { className: 'sub-articles-container middle-group' },
        middleArticles && middleArticles.map(function (article, index$1) {
          var articleThumbnail = '';
          var articleAltText = article.title;
          if (article.thumbnail && article.thumbnail.asset) {
            articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });

            articleAltText = article.thumbnail.asset.originalFileName;
          } else if (props.thumbnail) {
            articleThumbnail = props.thumbnail;
          }
          return React__default['default'].createElement(
            'div',
            { key: index$1, className: 'sub-article' },
            React__default['default'].createElement(
              'a',
              { href: '/view/' + article.url.current },
              React__default['default'].createElement(
                'figure',
                null,
                React__default['default'].createElement('img', { src: articleThumbnail, alt: articleAltText })
              )
            ),
            React__default['default'].createElement(
              'div',
              { className: 'sub-article--body' },
              React__default['default'].createElement(
                'a',
                { href: '/view/' + article.url.current },
                React__default['default'].createElement(
                  'h2',
                  null,
                  article.title
                )
              ),
              React__default['default'].createElement('div', null),
              moment.moment(article.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM Do YYYY, h:mma'),
              article.authorMapping && article.authorMapping.length > 0 && React__default['default'].createElement(
                'div',
                { className: 'author-wrapper' },
                React__default['default'].createElement(
                  index.LazyLoad,
                  { height: 50 },
                  React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: article.authorMapping })
                )
              )
            )
          );
        })
      ),
      React__default['default'].createElement(
        'div',
        { className: 'sub-articles-container' },
        subArticles && subArticles.map(function (article, index$1) {
          var articleThumbnail = '';
          var articleAltText = article.title;
          if (article.thumbnail && article.thumbnail.asset) {
            articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });
            articleAltText = article.thumbnail.asset.originalFileName;
          } else if (props.thumbnail) {
            articleThumbnail = props.thumbnail;
          }
          return React__default['default'].createElement(
            'div',
            { key: index$1, className: 'sub-article' },
            React__default['default'].createElement(
              'a',
              { href: '/view/' + article.url.current },
              React__default['default'].createElement(
                'figure',
                null,
                React__default['default'].createElement('img', { src: articleThumbnail, alt: articleAltText })
              )
            ),
            React__default['default'].createElement(
              'div',
              { className: 'sub-article--body' },
              React__default['default'].createElement(
                'a',
                { href: '/view/' + article.url.current },
                React__default['default'].createElement(
                  'h2',
                  null,
                  article.title
                )
              ),
              React__default['default'].createElement('div', null),
              moment.moment(article.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM Do YYYY, h:mma'),
              article.authorMapping && article.authorMapping.length > 0 && React__default['default'].createElement(
                'div',
                { className: 'author-wrapper' },
                React__default['default'].createElement(
                  index.LazyLoad,
                  { height: 50 },
                  React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: article.authorMapping })
                )
              )
            )
          );
        })
      )
    ),
    React__default['default'].createElement(
      'style',
      { jsx: 'true' },
      '\n        .article-hero-container {\n          margin: 0 -0.8rem;\n        }\n        .author-wrapper {\n          font-style: normal !important;\n        }\n        @media screen and (min-width: 1400px) {\n          .article-hero-container {\n            display: flex;\n            flex-direction: row;\n            margin-bottom: 30px;\n          }\n          .top-outer {\n            width: 50%;\n          }\n          .sub-outer-container {\n            width: 50%;\n          }\n        }\n        .top-article {\n          // width: 50%;\n          margin: 0 1rem;\n          height: 100%;\n          display: block;\n        }\n        .top-article figure {\n          width: 100%;\n          height: 60%;\n        }\n        .top-article figure img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .top-article--body h1 {\n          font-size: 1.4rem;\n          color: black !important;\n          font-weight: bold;\n        }\n        // .sub-articles-container {\n        //   width: 50%;\n        //   flex: 1 1 auto;\n        //   min-width: 350px;\n        // }\n        .sub-article {\n          margin: 0 1rem 1rem;\n          display: flex;\n          flex-direction: row;\n        }\n        .sub-article figure {\n          width: 125px;\n        }\n        .sub-article figure img {\n          width: 125px;\n          height: auto;\n          object-fit: cover;\n        }\n        .sub-article--body {\n          padding-left: 1rem;\n          font-size: 0.9rem;\n        }\n        .sub-article--body h2 {\n          font-size: 1rem;\n          font-weight: bold;\n        }\n        @media screen and (max-width: 1368px) {\n          .article-hero-container {\n            flex-direction: column;\n          }\n          .top-article {\n            // width: unset;\n            flex: 1 1 auto;\n          }\n          .sub-articles-container {\n            width: 100%;\n            margin-top: 1rem;\n            min-width: 280px;\n          }\n        }\n        @media screen and (max-width: 1399px) and (min-width: 992px) {\n          .top-article {\n            // width: 50%;\n            flex: 1 1 auto;\n            margin-bottom: 1rem;\n          }\n          .middle-group {\n            display: none;\n          }\n          .middle-single {\n            display: block !important;\n            margin-top: 0 !important;\n          }\n          .top-article figure img {\n            max-height: 180px !important;\n          }\n          .top-article-summary {\n            display: none;\n          }\n        }\n        // @media only screen and (min-width) {\n        //   .sub-outer-container {\n        //     width: 50%;\n        //     flex: 1 1 auto;\n        //     min-width: 350px;\n        //   }\n        // }\n        .middle-single {\n          display: none;\n        }\n        .top-outer {\n          display: flex;\n        }\n      '
    )
  );
};

module.exports = OncliveLargeHero;
