'use strict';

var React = require('react');
var moment = require('./moment-aca40de1.js');
var urlFor = require('./urlFor.js');
var entities = require('./entities-3f9d0f2f.js');
var AuthorComponent = require('./AuthorComponent-c21aac7f.js');
var index = require('./index-eadd5035.js');
require('./_commonjsHelpers-06173234.js');
require('./index-efca863c.js');
require('./slicedToArray-5d1bc3b3.js');
require('./web.dom.iterable-46657b5c.js');
require('./es6.string.iterator-c2573ffd.js');
require('./_to-object-6de10e57.js');
require('./core.get-iterator-method-f474eacc.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 YahooHero = function YahooHero(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, 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(
      'a',
      { href: '/view/' + topArticle.url.current },
      React__default['default'].createElement(
        'div',
        { className: 'yh-top-article' },
        React__default['default'].createElement(
          'div',
          { className: 'yh-top-article--img' },
          React__default['default'].createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
        ),
        React__default['default'].createElement('div', { className: 'yh-top-article--blur' }),
        React__default['default'].createElement(
          'div',
          { className: 'yh-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',
            null,
            entities.clean_html_1(topArticle.summary)
          )
        )
      )
    ),
    React__default['default'].createElement(
      'div',
      { className: 'yh-sub-article-container' },
      subArticles.map(function (article, index$1) {
        var articleThumbnail = '';
        article.title;
        if (article.thumbnail && article.thumbnail) {
          articleThumbnail = urlFor({ client: client, source: article.thumbnail, imageWidth: 250 });

          article.thumbnail.asset.originalFileName;
        } else if (props.thumbnail) {
          articleThumbnail = props.thumbnail;
        }

        return React__default['default'].createElement(
          'div',
          { key: index$1, className: 'yh-sub-article' },
          React__default['default'].createElement(
            'a',
            { href: '/view/' + article.url.current },
            React__default['default'].createElement('img', { src: articleThumbnail })
          ),
          React__default['default'].createElement(
            'a',
            { href: '/view/' + article.url.current },
            React__default['default'].createElement(
              'h6',
              { className: 'yh-sub-article--title' },
              article.title
            )
          ),
          React__default['default'].createElement(
            'p',
            { className: 'yh-sub-article--info' },
            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        .article-hero{\n          padding-bottom:15px\n        }\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: Roboto, sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 615px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          max-height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n\n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
    )
  );
};

module.exports = YahooHero;
