import './_commonjsHelpers-0c4b6f40.js';
import './_to-object-a4107da3.js';
import './es6.string.iterator-c990c18c.js';
import './core.get-iterator-method-e1de7503.js';
import './web.dom.iterable-4439f05a.js';
import React from 'react';
import 'prop-types';
import { m as moment } from './moment-b6f49411.js';
import 'react-dom';
import { i as imageUrlBuilder } from './index-51a80699.js';
import { L as LazyLoad } from './index-6c12bdd5.js';
import { c as clean_html_1 } from './entities-7cc3bf45.js';
import './slicedToArray-641f241f.js';
import { A as AuthorComponent } from './AuthorComponent-8ffd4679.js';

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 builder = imageUrlBuilder(client);
  function urlFor(source) {
    return builder.image(source).auto('format');
  }

  var topArticleThumbnail = '';
  var topArticleAltText = topArticle.title;
  if (topArticle.thumbnail && topArticle.thumbnail.asset) {
    topArticleThumbnail = urlFor(topArticle.thumbnail.asset).width(550).url();
    topArticleAltText = topArticle.thumbnail.asset.originalFileName;
  } else if (props.thumbnail) {
    topArticleThumbnail = props.thumbnail;
  }

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

export default OncliveLargeHero;
