'use strict';

var React = require('react');
var moment = require('./moment-aca40de1.js');
var urlFor = require('./urlFor.js');
var AuthorComponent = require('./AuthorComponent-7d00f6d5.js');
var index = require('./index-65621b6c.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 fbsHero = function fbsHero(props) {
  var removeTimeStamp = props.removeTimeStamp;

  var topArticle = props.dataRecord[0];
  var subArticles = props.dataRecord.slice(1, 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: 600 });

    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: 'fbs-top-article' },
      React__default["default"].createElement(
        'div',
        { className: 'fbs-top-article--img' },
        React__default["default"].createElement(
          'a',
          { href: '/view/' + topArticle.url.current },
          React__default["default"].createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
        )
      ),
      React__default["default"].createElement(
        'div',
        { className: 'fbs-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',
          null,
          moment.moment(topArticle.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM DD, YYYY hh:mma')
        ),
        topArticle.authorMapping && topArticle.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: topArticle.url.current, index: topArticle.url.current, authors: topArticle.authorMapping })
          )
        )
      )
    ),
    React__default["default"].createElement(
      'div',
      { className: 'fbs-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: 250 });
          articleAltText = article.thumbnail.asset.originalFileName;
        } else if (props.thumbnail) {
          articleThumbnail = props.thumbnail;
        }

        return React__default["default"].createElement(
          'div',
          { key: index$1, className: 'fbs-sub-article' },
          React__default["default"].createElement(
            'a',
            { href: '/view/' + article.url.current },
            React__default["default"].createElement('img', { src: articleThumbnail, alt: articleAltText })
          ),
          React__default["default"].createElement(
            'div',
            null,
            React__default["default"].createElement(
              'a',
              { href: '/view/' + article.url.current },
              React__default["default"].createElement(
                'h2',
                { className: 'fbs-sub-article--title' },
                article.title
              )
            ),
            React__default["default"].createElement(
              'p',
              null,
              moment.moment(article.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM DD, YYYY hh:mma')
            ),
            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 })
            )
          )
        );
      })
    ),
    React__default["default"].createElement(
      'style',
      { jsx: 'true' },
      '\n        .author-wrapper {\n          text-align: center;\n        }\n        .article-hero {\n          margin-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n          padding-bottom: 0.5rem;\n        }\n        .fbs-top-article {\n          width: 100%;\n          margin-bottom: 1rem;\n          padding-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n        }\n        .fbs-top-article img {\n          width: 100%;\n\n          max-height: 400px;\n          min-height: 275px;\n          object-fit: cover;\n        }\n\n        .fbs-top-article--body {\n        }\n        .fbs-top-article--body h1 {\n          color: #252525 !important;\n          font-size: 1.6rem;\n          font-weight: bold;\n          text-align: center;\n          margin-top: 1rem;\n        }\n        .fbs-top-article--body p {\n          text-align: center;\n          margin-bottom: 0;\n          color: #252525;\n        }\n        .fbs-top-article--body p:first-of-type {\n          font-size: 0.9rem;\n        }\n        .fbs-sub-article-container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n\n          padding-top: 1.75rem;\n          margin-left: -1rem;\n          margin-rigth: -1rem;\n        }\n        .fbs-sub-article {\n          width: calc(50% - 2rem);\n          min-width: 350px;\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0 1rem 1.75rem;\n        }\n        .fbs-sub-article img {\n          margin-right: 1rem;\n          width: 145px;\n          min-width: 145px;\n          max-height: 100px;\n          object-fit: cover;\n        }\n        .fbs-sub-article p {\n          margin-bottom: 0;\n          font-size: 0.8rem;\n          color: #252525;\n        }\n        .fbs-sub-article .fbs-sub-article--title {\n          font-weight: bold;\n          font-size: 1rem;\n          color: #252525;\n        }\n      '
    )
  );
};

module.exports = fbsHero;
