'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

require('./_commonjsHelpers-06173234.js');
require('./_to-object-329a650b.js');
require('./es6.string.iterator-cc0bbaa4.js');
require('./_library-dd23b178.js');
require('./_object-pie-68c5bcbc.js');
require('./web.dom.iterable-a0e279c1.js');
var _typeof$1 = require('./typeof-725500bc.js');
require('./_is-array-754e012d.js');
var React = require('react');
var React__default = _interopDefault(React);
require('prop-types');
var moment = require('./moment-575fe24c.js');
require('react-dom');
var index$1 = require('./index-be0c82be.js');
var index$2 = require('./index-da796b8c.js');
var styleInject_es = require('./style-inject.es-dcee06b6.js');

var css = ".VideoSeriesCard-module_article__Hlc3e {\r\n  width: 100%;\r\n  margin: 0 0 1rem 0;\r\n}\r\n.VideoSeriesCard-module_article__Hlc3e a {\r\n  display: flex;\r\n  width: 100%;\r\n  color: #000000;\r\n}\r\n.VideoSeriesCard-module_thumb__3hGyJ {\r\n  width: 25%;\r\n}\r\n.VideoSeriesCard-module_thumb__3hGyJ img {\r\n  width: 100%;\r\n  height: auto;\r\n}\r\n.VideoSeriesCard-module_info__2_i1N {\r\n  width: 75%;\r\n  font-size: 1rem;\r\n}\r\n.VideoSeriesCard-module_info__2_i1N h2 {\r\n  font-weight: bold;\r\n  font-size: 1.25rem;\r\n  margin: 0;\r\n}\r\n.VideoSeriesCard-module_published__1fI0q {\r\n  color: #6d6d6d;\r\n  margin: 0;\r\n}\r\n.VideoSeriesCard-module_summary__3hWJT {\r\n  margin: 0.5rem 0 0 0;\r\n}\r\n.VideoSeriesCard-module_author__aU35o {\r\n  margin: 0;\r\n}\r\n.VideoSeriesCard-module_author__aU35o span {\r\n  color: #6d6d6d;\r\n}\r\n@media only screen and (max-width: 568px) {\r\n  .VideoSeriesCard-module_article__Hlc3e {\r\n    margin: 1rem 0;\r\n    box-shadow: 2px 4px 8px rgba(0,0,0,.2);\r\n  }\r\n  .VideoSeriesCard-module_article__Hlc3e a {\r\n    flex-direction: column;\r\n    align-items: center;\r\n  }\r\n  .VideoSeriesCard-module_thumb__3hGyJ {\r\n    overflow: hidden;\r\n    width: 100%;\r\n    margin-bottom: 1rem;\r\n  }\r\n  .VideoSeriesCard-module_thumb__3hGyJ img{\r\n    border-radius: 10px 10px 0 0;    \r\n  }\r\n  .VideoSeriesCard-module_thumb__3hGyJ figure {\r\n    margin: 0;\r\n  }\r\n  .VideoSeriesCard-module_info__2_i1N {\r\n    width: 90%;\r\n    padding: 1rem !important;\r\n  }\r\n  .VideoSeriesCard-module_info__2_i1N h2 {\r\n    font-size: 1rem;\r\n  }\r\n}\r\n";
var styles = { "article": "VideoSeriesCard-module_article__Hlc3e", "thumb": "VideoSeriesCard-module_thumb__3hGyJ", "info": "VideoSeriesCard-module_info__2_i1N", "published": "VideoSeriesCard-module_published__1fI0q", "summary": "VideoSeriesCard-module_summary__3hWJT", "author": "VideoSeriesCard-module_author__aU35o" };
styleInject_es.styleInject(css);

var VideoSeriesCard = function VideoSeriesCard(props) {
  var data = props.data,
      variant = props.variant,
      defaultImage = props.defaultImage,
      client = props.client,
      index = props.index;

  var episode = parseInt(index) + 1;
  var builder = index$1.imageUrlBuilder(client);
  return React__default.createElement(
    'div',
    { className: styles.article },
    React__default.createElement(
      'a',
      { href: '/view/' + data.url.current, style: variant === 'right' ? { flexDirection: 'row-reverse' } : {} },
      React__default.createElement(
        'div',
        { className: styles.thumb },
        React__default.createElement(
          'figure',
          null,
          React__default.createElement(
            index$2.LazyLoad,
            null,
            React__default.createElement('img', {
              src: data.thumbnail && data.thumbnail.asset ? builder.image(data.thumbnail).url() : data.thumbnail && _typeof$1._typeof(data.thumbnail == 'string') ? data.thumbnail : defaultImage
            })
          )
        )
      ),
      React__default.createElement(
        'div',
        { className: styles.info, style: variant === 'right' ? { padding: '0 1rem 0 0' } : { padding: ' 0 0 0 1rem' } },
        React__default.createElement(
          'h2',
          null,
          episode && 'EP ' + episode + ': ',
          data.title
        ),
        data.published && React__default.createElement(
          'p',
          { className: styles.published },
          moment.moment(data.published).format('MMMM Do YYYY')
        ),
        data.authorMapping && data.authorMapping.displayName && React__default.createElement(
          'p',
          { className: styles.author },
          'By ',
          React__default.createElement(
            'span',
            null,
            data.authorMapping.displayName
          )
        ),
        data.intro && React__default.createElement('p', { dangerouslySetInnerHTML: { __html: data.intro }, className: styles.summary })
      )
    )
  );
};

module.exports = VideoSeriesCard;
