import { _ as _extends } from './extends-6d8e3924.js';
import { _ as _slicedToArray } from './slicedToArray-6ebcbfea.js';
import React__default, { useState, useEffect } from 'react';
import { B as BlockContent } from './BlockContent-1e73bd2c.js';
import { g as getSerializers } from './index-490f4f21.js';
import { m as momentTimezone } from './index-79cfd25c.js';
import { useRouter } from 'next/router';
import Button from 'react-bootstrap/Button';
import './_commonjsHelpers-0c4b6f40.js';
import './core.get-iterator-method-ea258bb1.js';
import './_object-pie-133f504a.js';
import './web.dom.iterable-ab4dea5c.js';
import 'prop-types';
import './index-3f5c03b2.js';
import 'react-bootstrap';
import './urlFor.js';
import './index-f0fc23eb.js';
import './events-6c3a7a63.js';
import './index-c7e2ac95.js';
import './util-8ed16d48.js';
import './Beam.js';
import './stringify-2b084bee.js';
import './asyncToGenerator-5ef104a7.js';
import './_library-528f1934.js';
import './_iter-detect-98db3b07.js';
import './Segment.js';
import './main-1894c974.js';
import './index-755f2cc2.js';
import 'react-dom';
import './typeof-e9fc0c5d.js';
import './_is-array-8d21b9e3.js';
import './brightcove-react-player-loader.es-57a70a56.js';
import './GroupDeck.js';
import './smoothscroll-fa4e3f8c.js';
import './moment-bc12cb97.js';
import './SocialShare.js';
import 'next/head';
import 'react-share';
import './_object-to-array-2300e51b.js';
import './toConsumableArray-f7074d7c.js';
import 'react-bootstrap/Pagination';
import './entities-6d9154b4.js';
import './AdSlot.js';
import './debounce-533d9748.js';
import './isSymbol-a7e9aafe.js';
import './toNumber-5aeba6e7.js';
import 'react-bootstrap/Row';
import 'react-bootstrap/Col';
import './inherits-a6ba2ec4.js';
import './_object-sap-7cee6f84.js';
import './define-property-5f1bda73.js';
import './index.esm-eb1e8e80.js';
import './iconBase-ccc56b97.js';
import 'react-bootstrap/Figure';
import 'react-bootstrap/OverlayTrigger';
import 'react-bootstrap/Tooltip';
import 'react-bootstrap/Popover';

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 = useState(display && (display === 'recent' || display === 'archived') ? display : 'recent'),
      _useState2 = _slicedToArray(_useState, 2),
      active = _useState2[0],
      setActive = _useState2[1];

  var router = useRouter();
  useEffect(function () {
    router.push(router.pathname, '/' + url + '?display=' + active, { shallow: true });
  }, [active]);
  return React__default.createElement(
    'div',
    { id: 'resources' },
    showToggles && React__default.createElement(
      'div',
      { id: 'toggles' },
      React__default.createElement(
        'div',
        { onClick: function onClick() {
            return setActive(function () {
              return 'recent';
            });
          }, className: active === 'recent' ? 'active' : '' },
        recentTitle
      ),
      React__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.createElement(
        'div',
        { key: r._id, className: 'resource' },
        dispalyThumb && React__default.createElement(
          'div',
          { id: 'thumb' },
          React__default.createElement(
            'a',
            { href: r.destination, target: '_blank', rel: 'noopener noreferrer' },
            React__default.createElement('img', { src: r.thumbnail })
          )
        ),
        React__default.createElement(
          'div',
          { id: 'details' },
          React__default.createElement(
            'a',
            { href: r.destination, target: '_blank', rel: 'noopener noreferrer' },
            React__default.createElement(
              'p',
              { id: 'title' },
              r.title
            ),
            r.intro && React__default.createElement(
              'div',
              { id: 'intro' },
              React__default.createElement(BlockContent, _extends({ serializers: getSerializers(client), blocks: r.intro }, client.config()))
            ),
            React__default.createElement(
              'div',
              { id: 'date' },
              React__default.createElement(
                'p',
                { style: { fontWeight: 'bold' } },
                'Date:'
              ),
              React__default.createElement(
                'p',
                null,
                momentTimezone.tz(r.displayDate, 'America/New_York').format(dateFormat),
                ' ',
                r.endDate && '- ' + momentTimezone.tz(r.endDate, 'America/New_York').format(dateFormat)
              )
            ),
            r.speakers && React__default.createElement(
              'div',
              { id: 'speakers' },
              React__default.createElement(
                'p',
                { style: { fontWeight: 'bold' } },
                'Speakers:'
              ),
              React__default.createElement(BlockContent, _extends({ serializers: getSerializers(client), blocks: r.speakers }, client.config()))
            ),
            r.location && React__default.createElement(
              'div',
              { id: 'location' },
              React__default.createElement(
                'p',
                { style: { fontWeight: 'bold' } },
                'Location:'
              ),
              r.location
            ),
            r.sponsor && React__default.createElement(
              'div',
              { id: 'sponsor' },
              React__default.createElement(
                'p',
                { style: { fontWeight: 'bold' } },
                'Sponsors:'
              ),
              r.sponsor
            )
          ),
          React__default.createElement(
            Button,
            { id: 'cta', variant: 'secondary', href: r.destination, target: '_blank', rel: 'noopener noreferrer' },
            cta
          )
        )
      );
    }) : React__default.createElement(
      'p',
      null,
      'No content available.'
    ),
    React__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      '
    )
  );
};

export default ExternalResources;
