'use strict';

var _extends = require('./extends-29bdbc6d.js');
var slicedToArray = require('./slicedToArray-5d1bc3b3.js');
var React = require('react');
var BlockContent = require('./BlockContent-36e54d77.js');
var getSerializers = require('./index-32097c80.js');
var index = require('./index-f86bb269.js');
var Router = require('next/router');
var Button = require('react-bootstrap/Button');
require('./_commonjsHelpers-06173234.js');
require('./_to-object-6de10e57.js');
require('./_object-pie-083f2dd6.js');
require('./web.dom.iterable-46657b5c.js');
require('./es6.string.iterator-c2573ffd.js');
require('./core.get-iterator-method-f474eacc.js');
require('prop-types');
require('./index-efca863c.js');
require('react-bootstrap');
require('./urlFor.js');
require('./index-0e4427c8.js');
require('./index-187c967e.js');
require('./util-6f784d85.js');
require('./Beam.js');
require('./stringify-c9ac1214.js');
require('./asyncToGenerator-58c289d9.js');
require('./_library-dd23b178.js');
require('./_iter-detect-55a5657a.js');
require('./Segment.js');
require('./main-f1c77adb.js');
require('./index-eadd5035.js');
require('react-dom');
require('./typeof-88a668c5.js');
require('./_is-array-6128bd56.js');
require('./brightcove-react-player-loader.es-a195642e.js');
require('./GroupDeck.js');
require('./smoothscroll-99df7f93.js');
require('./moment-aca40de1.js');
require('./SocialShare.js');
require('next/head');
require('react-share');
require('./_object-to-array-8fe5a54f.js');
require('./toConsumableArray-ddb70795.js');
require('react-bootstrap/Pagination');
require('./entities-3f9d0f2f.js');
require('./AdSlot.js');
require('./debounce-d4a2369b.js');
require('./isSymbol-03abbdf0.js');
require('./toNumber-5e1fac58.js');
require('react-bootstrap/Row');
require('react-bootstrap/Col');
require('./inherits-c2065b95.js');
require('./_object-sap-a175b4a9.js');
require('./define-property-c88be878.js');
require('./index.esm-00a6aade.js');
require('./iconBase-be4097c0.js');
require('react-bootstrap/Figure');
require('react-bootstrap/OverlayTrigger');
require('react-bootstrap/Tooltip');
require('react-bootstrap/Popover');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);

var ExternalResources = function ExternalResources(props) {
  var resources = props.resources,
      display = props.display,
      client = props.client,
      _props$cta = props.cta,
      cta = _props$cta === undefined ? 'Learn More' : _props$cta,
      _props$url = props.url,
      url = _props$url === undefined ? 'resources' : _props$url,
      _props$recentTitle = props.recentTitle,
      recentTitle = _props$recentTitle === undefined ? 'Recent' : _props$recentTitle,
      _props$archiveTitle = props.archiveTitle,
      archiveTitle = _props$archiveTitle === undefined ? 'Archive' : _props$archiveTitle,
      _props$dispalyThumb = props.dispalyThumb,
      dispalyThumb = _props$dispalyThumb === undefined ? true : _props$dispalyThumb,
      _props$dateFormat = props.dateFormat,
      dateFormat = _props$dateFormat === undefined ? 'MMMM Do YYYY, h:mm a z' : _props$dateFormat,
      _props$showToggles = props.showToggles,
      showToggles = _props$showToggles === undefined ? true : _props$showToggles;

  var _useState = React.useState(display && (display === 'recent' || display === 'archived') ? display : 'recent'),
      _useState2 = slicedToArray._slicedToArray(_useState, 2),
      active = _useState2[0],
      setActive = _useState2[1];

  var router = Router.useRouter();
  React.useEffect(function () {
    router.push(router.pathname, '/' + url + '?display=' + active, { shallow: true });
  }, [active]);
  return React__default['default'].createElement(
    'div',
    { id: 'resources' },
    showToggles && React__default['default'].createElement(
      'div',
      { id: 'toggles' },
      React__default['default'].createElement(
        'div',
        { onClick: function onClick() {
            return setActive(function () {
              return 'recent';
            });
          }, className: active === 'recent' ? 'active' : '' },
        recentTitle
      ),
      React__default['default'].createElement(
        'div',
        { onClick: function onClick() {
            return setActive(function () {
              return 'archived';
            });
          }, className: active === 'archived' ? 'active' : '' },
        archiveTitle
      )
    ),
    resources[active].length > 0 ? resources[active].map(function (r) {
      return React__default['default'].createElement(
        'div',
        { key: r._id, className: 'resource' },
        dispalyThumb && React__default['default'].createElement(
          'div',
          { id: 'thumb' },
          React__default['default'].createElement(
            'a',
            { href: r.destination, target: '_blank', rel: 'noopener noreferrer' },
            React__default['default'].createElement('img', { src: r.thumbnail })
          )
        ),
        React__default['default'].createElement(
          'div',
          { id: 'details' },
          React__default['default'].createElement(
            'a',
            { href: r.destination, target: '_blank', rel: 'noopener noreferrer' },
            React__default['default'].createElement(
              'p',
              { id: 'title' },
              r.title
            ),
            r.intro && React__default['default'].createElement(
              'div',
              { id: 'intro' },
              React__default['default'].createElement(BlockContent.BlockContent, _extends._extends({ serializers: getSerializers.getSerializers(client), blocks: r.intro }, client.config()))
            ),
            React__default['default'].createElement(
              'div',
              { id: 'date' },
              React__default['default'].createElement(
                'p',
                { style: { fontWeight: 'bold' } },
                'Date:'
              ),
              React__default['default'].createElement(
                'p',
                null,
                index.momentTimezone.tz(r.displayDate, 'America/New_York').format(dateFormat),
                ' ',
                r.endDate && '- ' + index.momentTimezone.tz(r.endDate, 'America/New_York').format(dateFormat)
              )
            ),
            r.speakers && React__default['default'].createElement(
              'div',
              { id: 'speakers' },
              React__default['default'].createElement(
                'p',
                { style: { fontWeight: 'bold' } },
                'Speakers:'
              ),
              React__default['default'].createElement(BlockContent.BlockContent, _extends._extends({ serializers: getSerializers.getSerializers(client), blocks: r.speakers }, client.config()))
            ),
            r.location && React__default['default'].createElement(
              'div',
              { id: 'location' },
              React__default['default'].createElement(
                'p',
                { style: { fontWeight: 'bold' } },
                'Location:'
              ),
              r.location
            ),
            r.sponsor && React__default['default'].createElement(
              'div',
              { id: 'sponsor' },
              React__default['default'].createElement(
                'p',
                { style: { fontWeight: 'bold' } },
                'Sponsors:'
              ),
              r.sponsor
            )
          ),
          React__default['default'].createElement(
            Button__default['default'],
            { id: 'cta', variant: 'secondary', href: r.destination, target: '_blank', rel: 'noopener noreferrer' },
            cta
          )
        )
      );
    }) : React__default['default'].createElement(
      'p',
      null,
      'No content available.'
    ),
    React__default['default'].createElement(
      'style',
      { jsx: true },
      '\n        .resource {\n          display: flex;\n          position: relative;\n          margin: 0 0 1rem 0;\n        }\n        .resource #thumb {\n          box-sizing: border-box;\n          padding: 0.5rem;\n          width: 25%;\n        }\n        .resource #thumb img {\n          width: 100%;\n        }\n        .resource #details {\n          box-sizing: border-box;\n          padding: 0.5rem;\n          width: 75%;\n        }\n        #resources .resource p {\n          margin: 0;\n        }\n        #toggles {\n          display: flex;\n          margin: 0 0 1rem 0;\n        }\n        #toggles > div {\n          padding: 0.5rem;\n          cursor: pointer;\n        }\n        #toggles > div:hover {\n          font-weight: bold;\n          border-bottom: 2px solid #cecece;\n        }\n        #toggles > div.active {\n          font-weight: bold;\n          border-bottom: 2px solid var(--primary);\n        }\n        .resource #title {\n          font-weight: bold;\n          font-size: 1.25rem;\n        }\n        .resource #date,\n        .resource #speakers,\n        .resource #location,\n        .resource #sponsor,\n        .resource #cta {\n          margin: 1rem 0 0 0;\n        }\n      '
    )
  );
};

module.exports = ExternalResources;
