'use strict';

var React = require('react');
var moment = require('./moment-aca40de1.js');
var urlFor = require('./urlFor.js');
var entities = require('./entities-df1aed86.js');
var index = require('./index-65621b6c.js');
var AuthorComponent = require('./AuthorComponent-7d00f6d5.js');
require('./_commonjsHelpers-06173234.js');
require('./slicedToArray-067dd3bc.js');
require('./web.dom.iterable-d98303e0.js');
require('./core.get-iterator-method-5643aa10.js');
require('./extends-be0d85bc.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 GridHero = function GridHero(props) {
  var topArticle = props.dataRecord[0];
  var subArticles = props.dataRecord.slice(1, 3);

  var client = props.client,
      _props$topWidth = props.topWidth,
      topWidth = _props$topWidth === undefined ? 600 : _props$topWidth,
      _props$subWidth = props.subWidth,
      subWidth = _props$subWidth === undefined ? 480 : _props$subWidth,
      _props$subHeight = props.subHeight,
      subHeight = _props$subHeight === undefined ? 270 : _props$subHeight;


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

  return React__default["default"].createElement(
    'div',
    { className: 'article-hero' },
    React__default["default"].createElement(
      'div',
      { className: 'grid-top-article' },
      topArticleThumbnail && React__default["default"].createElement(
        'a',
        { href: '/view/' + topArticle.url.current },
        React__default["default"].createElement(
          'div',
          { className: 'grid-top-article--img' },
          React__default["default"].createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
        )
      ),
      React__default["default"].createElement(
        'div',
        { className: 'grid-top-article--body' },
        React__default["default"].createElement(
          'a',
          { href: '/view/' + topArticle.url.current },
          React__default["default"].createElement(
            'h1',
            null,
            topArticle.title
          )
        ),
        React__default["default"].createElement(
          'p',
          { className: 'article-date' },
          moment.moment(topArticle.published).format('MMMM DD, YYYY ')
        ),
        topArticle.authorMapping && topArticle.authorMapping.length > 0 && React__default["default"].createElement(
          index.LazyLoad,
          { height: 50 },
          React__default["default"].createElement(AuthorComponent.AuthorComponent, { key: topArticle.url.current, index: topArticle.url.current, authors: topArticle.authorMapping })
        ),
        topArticle.summary && React__default["default"].createElement(
          'p',
          { className: 'top-article-summary' },
          entities.clean_html_1(topArticle.summary)
        )
      )
    ),
    React__default["default"].createElement(
      'div',
      { className: 'grid-sub-article-container' },
      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: subWidth, imageHeight: subHeight });
          articleAltText = article.thumbnail.asset.originalFileName;
        } else if (props.thumbnail) {
          articleThumbnail = props.thumbnail;
        }

        return React__default["default"].createElement(
          'div',
          { key: index$1, className: 'grid-sub-article sub-grid-' + (index$1 + 1) },
          articleThumbnail && React__default["default"].createElement(
            'a',
            { href: '/view/' + article.url.current },
            React__default["default"].createElement('img', { src: articleThumbnail, alt: articleAltText })
          ),
          React__default["default"].createElement(
            'div',
            { className: 'grid-sub-article-body' },
            React__default["default"].createElement(
              'a',
              { href: '/view/' + article.url.current },
              React__default["default"].createElement(
                'h2',
                { className: 'grid-sub-article--title' },
                article.title
              )
            ),
            React__default["default"].createElement(
              'p',
              { className: 'article-date' },
              moment.moment(article.published).format('MMMM DD, YYYY ')
            ),
            article.authorMapping && article.authorMapping.length > 0 && React__default["default"].createElement(
              index.LazyLoad,
              { height: 50 },
              React__default["default"].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: article.authorMapping })
            ),
            article.summary && React__default["default"].createElement(
              'p',
              { className: 'sub-article-summary' },
              entities.clean_html_1(article.summary)
            )
          )
        );
      })
    ),
    React__default["default"].createElement(
      'style',
      { jsx: 'true' },
      '\n        .article-hero {\n          margin-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n          padding-bottom: 0.5rem;\n          margin-left: 15px;\n          margin-right: 15px;\n        }\n        .grid-top-article {\n          width: 100%;\n          margin-bottom: 1rem;\n          padding-bottom: 1rem;\n          border-bottom: 5px solid var(--primary);\n          box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2);\n        }\n        .grid-top-article img {\n          width: 100%;\n\n          max-height: 300px;\n          min-height: 275px;\n          object-fit: cover;\n          height: 112.5px;\n        }\n\n        .grid-top-article--body {\n          padding: 1.25rem;\n        }\n        .grid-top-article--body h1 {\n          color: #373a3c !important;\n          margin-bottom: 0.25rem !important;\n          font-weight: 600 !important;\n          font-size: 1.6rem;\n          font-size: 1.40625rem;\n          line-height: 1.2;\n        }\n        .grid-top-article--body p {\n          margin-bottom: 0;\n          color: #252525;\n        }\n\n        .grid-sub-article-container {\n          display: flex;\n          flex-direction: row;\n          padding-top: 1rem;\n        }\n        .grid-sub-article {\n          width: 48%;\n          margin-bottom: 1.75rem;\n        }\n        .grid-sub-article-body {\n          padding: 1.25rem;\n        }\n        @media screen and (min-width: 992px) {\n          .sub-grid-1 {\n            margin-right: 2%;\n          }\n          .sub-grid-2 {\n            margin-left: 2%;\n          }\n        }\n        .grid-sub-article img {\n          margin-right: 1rem;\n          width: 100%;\n          max-height: 240px;\n          object-fit: contain;\n        }\n        .grid-sub-article p {\n          margin-bottom: 0;\n\n          color: #373a3c;\n        }\n        .grid-sub-article .grid-sub-article--title {\n          color: #373a3c !important;\n          margin-bottom: 0.25rem !important;\n          font-weight: 600 !important;\n          font-size: 1.6rem;\n          font-size: 1.40625rem;\n          line-height: 1.2;\n        }\n        .author-text {\n          font-size: 0.9375rem;\n          font-weight: 400;\n          line-height: 1.5;\n        }\n        .author-text > span {\n          color: #868e96 !important;\n        }\n        .article-date {\n          font-style: italic;\n        }\n        .top-article-summary,\n        .sub-article-summary {\n          margin-top: 0.5rem;\n        }\n\n        @media screen and (max-width: 992px) {\n          .grid-sub-article-container {\n            flex-direction: column;\n          }\n          .grid-sub-article {\n            width: 100%;\n          }\n        }\n      '
    )
  );
};

module.exports = GridHero;
