import React from 'react';
import { m as moment } from './moment-bc12cb97.js';
import { i as imageUrlBuilder } from './index-0dbff1d1.js';
import { A as AuthorComponent } from './AuthorComponent-5ae7409f.js';
import { L as LazyLoad } from './index-35bdcc81.js';
import './_commonjsHelpers-0c4b6f40.js';
import './slicedToArray-be2f7a22.js';
import './web.dom.iterable-4109ff68.js';
import './es6.string.iterator-bc33758b.js';
import './_to-object-b50e61c3.js';
import './core.get-iterator-method-133dfacd.js';
import 'react-dom';
import 'prop-types';

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 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(600).url();
    topArticleAltText = topArticle.thumbnail.asset.originalFileName;
  } else if (props.thumbnail) {
    topArticleThumbnail = props.thumbnail;
  }

  return React.createElement(
    'div',
    { className: 'article-hero' },
    React.createElement(
      'div',
      { className: 'fbs-top-article' },
      React.createElement(
        'div',
        { className: 'fbs-top-article--img' },
        React.createElement(
          'a',
          { href: '/view/' + topArticle.url.current },
          React.createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
        )
      ),
      React.createElement(
        'div',
        { className: 'fbs-top-article--body' },
        React.createElement(
          'a',
          { href: '/view/' + topArticle.url.current },
          React.createElement(
            'h1',
            null,
            topArticle.title
          )
        ),
        React.createElement(
          'p',
          null,
          moment(topArticle.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM DD, YYYY hh:mma')
        ),
        topArticle.authorMapping && topArticle.authorMapping.length > 0 && React.createElement(
          'div',
          { className: 'author-wrapper' },
          React.createElement(
            LazyLoad,
            { height: 50 },
            React.createElement(AuthorComponent, { key: topArticle.url.current, index: topArticle.url.current, authors: topArticle.authorMapping })
          )
        )
      )
    ),
    React.createElement(
      'div',
      { className: 'fbs-sub-article-container' },
      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: 'fbs-sub-article' },
          React.createElement(
            'a',
            { href: '/view/' + article.url.current },
            React.createElement('img', { src: articleThumbnail, alt: articleAltText })
          ),
          React.createElement(
            'div',
            null,
            React.createElement(
              'a',
              { href: '/view/' + article.url.current },
              React.createElement(
                'h2',
                { className: 'fbs-sub-article--title' },
                article.title
              )
            ),
            React.createElement(
              'p',
              null,
              moment(article.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM DD, YYYY hh:mma')
            ),
            article.authorMapping && article.authorMapping.length > 0 && React.createElement(
              LazyLoad,
              { height: 50 },
              React.createElement(AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
            )
          )
        );
      })
    ),
    React.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: 300px;\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      '
    )
  );
};

export default fbsHero;
