'use strict';

var _extends = require('./extends-29bdbc6d.js');
var _typeof = require('./typeof-88a668c5.js');
var inherits = require('./inherits-c2065b95.js');
var React = require('react');
var PropTypes = require('prop-types');
var reactInstantsearchDom = require('react-instantsearch-dom');
var reactBootstrap = require('react-bootstrap');
var index = require('./index-efca863c.js');
var moment = require('./moment-aca40de1.js');
var index$1 = require('./index-eadd5035.js');
require('./_commonjsHelpers-06173234.js');
require('./_to-object-6de10e57.js');
require('./_object-pie-083f2dd6.js');
require('./es6.string.iterator-c2573ffd.js');
require('./web.dom.iterable-46657b5c.js');
require('./_is-array-6128bd56.js');
require('./_library-dd23b178.js');
require('./_object-sap-a175b4a9.js');
require('./define-property-c88be878.js');
require('react-dom');

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

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);

var AlgoliaSearch = function (_React$Component) {
  inherits._inherits(AlgoliaSearch, _React$Component);

  function AlgoliaSearch() {
    inherits._classCallCheck(this, AlgoliaSearch);

    return inherits._possibleConstructorReturn(this, (AlgoliaSearch.__proto__ || inherits._Object$getPrototypeOf(AlgoliaSearch)).apply(this, arguments));
  }

  inherits._createClass(AlgoliaSearch, [{
    key: 'Deck',
    value: function Deck(props) {
      var _props$propsObj = props.propsObj,
          styles = _props$propsObj.styles,
          client = _props$propsObj.client;

      var builder = index.imageUrlBuilder(client);
      var hit = props.hit;
      return React__default['default'].createElement(
        'div',
        { key: hit.url, className: styles.article },
        React__default['default'].createElement(
          'a',
          { href: '/view/' + hit.url, style: this.props.variant === 'right' ? { flexDirection: 'row-reverse' } : {} },
          React__default['default'].createElement(
            'div',
            { className: styles.thumb },
            React__default['default'].createElement(
              'figure',
              null,
              React__default['default'].createElement(
                index$1.LazyLoad,
                null,
                React__default['default'].createElement('img', {
                  src: hit.thumbnail && hit.thumbnail.asset ? builder.image(hit.thumbnail).url() : hit.thumbnail && _typeof._typeof(hit.thumbnail === 'string') ? hit.thumbnail : this.props.defaultImage
                })
              )
            )
          ),
          React__default['default'].createElement(
            'div',
            { className: styles.info, style: this.props.variant === 'right' ? { padding: '0 1rem 0 0' } : { padding: ' 0 0 0 1rem' } },
            React__default['default'].createElement(
              'h2',
              null,
              hit.title
            ),
            hit.pubDateSort && React__default['default'].createElement(
              'p',
              { className: styles.published },
              moment.moment(hit.pubDateSort).format('MMMM Do YYYY')
            ),
            hit.authorMapping && hit.authorMapping.length > 0 && React__default['default'].createElement(
              'p',
              { className: styles.author },
              hit.authorMapping.map(function (author) {
                return React__default['default'].createElement(
                  'span',
                  null,
                  author.displayName
                );
              })
            ),
            hit.summary && React__default['default'].createElement('p', { dangerouslySetInnerHTML: { __html: hit.summary }, className: styles.summary })
          )
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var propsObj = {
        styles: this.props.deckStyles,
        client: this.props.sanityClient
      };
      return React__default['default'].createElement(
        React__default['default'].Fragment,
        null,
        React__default['default'].createElement(
          reactInstantsearchDom.InstantSearch,
          _extends._extends({
            searchClient: this.props.searchClient,
            resultsState: this.props.resultsState,
            onSearchStateChange: this.props.onSearchStateChange,
            searchState: this.props.searchState,
            createURL: this.props.createURL,
            indexName: this.props.indexName,
            onSearchParameters: this.props.onSearchParameters
          }, this.props),
          React__default['default'].createElement(reactInstantsearchDom.Configure, { hitsPerPage: this.props.hitsPerPage || 20 }),
          React__default['default'].createElement(reactInstantsearchDom.SearchBox, null),
          this.props.refinementAttributes && React__default['default'].createElement(
            'div',
            { className: 'search_refinement' },
            this.props.refinementAttributes.map(function (item, index) {
              return React__default['default'].createElement(
                reactBootstrap.DropdownButton,
                { title: item.title },
                React__default['default'].createElement(reactInstantsearchDom.RefinementList, { showMore: item.showMore, limit: item.limit, showMoreLimit: item.showMoreLimit, attribute: item.attribute })
              );
            })
          ),
          React__default['default'].createElement(
            'div',
            { className: 'AlgoliaResults' },
            React__default['default'].createElement(reactInstantsearchDom.Hits, { hitComponent: function hitComponent(hit) {
                return _this2.Deck(_extends._extends({}, hit, { propsObj: propsObj }));
              } })
          ),
          React__default['default'].createElement(reactInstantsearchDom.Pagination, null)
        ),
        React__default['default'].createElement(
          'style',
          { jsx: 'true' },
          '\n          .AlgoliaResults {\n            padding-left: 15px;\n            margin-top: 3rem;\n          }\n\n          .search_refinement {\n            display: flex;\n            margin: 2rem 0;\n          }\n\n          .search_refinement > div {\n            padding-right: 1rem;\n            max-height: 500px;\n          }\n\n          .ais-Hits-list {\n            margin: 0;\n            list-style: none;\n            padding-inline-start: 0;\n          }\n          .ais-Pagination-list {\n            list-style: none;\n          }\n          .ais-Pagination-list {\n            -webkit-box-pack: center;\n            -ms-flex-pack: center;\n            justify-content: center;\n          }\n          .ais-Pagination-item + .ais-Pagination-item {\n            margin-left: 0.3rem;\n          }\n          .ais-Pagination-link {\n            padding: 0.3rem 0.6rem;\n            display: block;\n            border: 1px solid var(--search-primary);\n            border-radius: 5px;\n            transition: background-color 0.2s ease-out;\n          }\n          .ais-Pagination-link:focus,\n          .ais-Pagination-link:hover {\n            background-color: var(--search-secondary);\n            color: #fff;\n          }\n          .ais-Pagination-item--disabled .ais-Pagination-link {\n            opacity: 0.6;\n            cursor: not-allowed;\n            color: var(--search-secondary);\n          }\n          .ais-Pagination-item--disabled .ais-Pagination-link:focus,\n          .ais-Pagination-item--disabled .ais-Pagination-link:hover {\n            color: #fff;\n            background-color: var(--search-secondary);\n          }\n          .ais-Pagination-item--selected .ais-Pagination-link {\n            color: #fff;\n            background-color: var(--search-primary);\n            border-color: var(--search-primary);\n          }\n          .ais-Pagination-item--selected .ais-Pagination-link:focus,\n          .ais-Pagination-item--selected .ais-Pagination-link:hover {\n            color: #fff;\n          }\n          .ais-Pagination-list,\n          .ais-Results-list {\n            margin: 0;\n            padding: 0;\n            list-style: none;\n          }\n          .ais-Pagination-list,\n          .ais-PoweredBy,\n          .ais-RangeInput-form,\n          .ais-RatingMenu-link {\n            display: -webkit-box;\n            display: -ms-flexbox;\n            display: flex;\n            -webkit-box-align: center;\n            -ms-flex-align: center;\n            align-items: center;\n          }\n\n          .ais-RefinementList-item {\n            list-style: none;\n            margin: 0;\n            padding: 0;\n          }\n          .ais-RefinementList-list {\n            margin: 0;\n            padding: 0 1rem;\n            width: max-content;\n          }\n          .ais-SearchBox-form {\n            width: 100%;\n            border-radius: 5px;\n            height: 48px;\n          }\n          .ais-SearchBox-input {\n            padding: 0.5rem;\n            border-radius: 5px;\n            width: calc(100% - 150px);\n            height: 48px;\n            border: 0;\n            border: 0.5px solid var(--search-secondary);\n          }\n\n          .ais-SearchBox-submit {\n            width: 78px;\n            border-radius: 5px;\n            padding: 7px;\n            margin-left: 5px;\n            height: 48px;\n            background-color: var(--search-primary);\n            border: 0.5px solid var(--search-secondary);\n          }\n\n          .ais-SearchBox-submit > svg {\n            fill: #fff;\n          }\n          .search_refinement > .dropdown > button {\n            background-color: var(--search-primary);\n            border-color: var(--search-primary);\n          }\n\n          .ais-SearchBox-reset {\n            height: 48px;\n            width: 48px;\n            color: #fff;\n            background-color: var(--search-primary);\n            border: 0;\n            margin-left: 5px;\n            border-radius: 5px;\n            border: 0.5px solid var(--search-secondary);\n          }\n\n          .ais-SearchBox-reset > svg {\n            fill: #fff;\n          }\n          .ais-RefinementList-checkbox {\n            margin-right: 5px;\n          }\n\n          .ais-RefinementList-showMore {\n            padding: 0.5rem;\n            border: 0;\n            background-color: var(--search-primary);\n            border-color: var(--search-primary);\n            color: #fff;\n            border: 1px solid;\n            border-radius: 5px;\n            margin-left: 1rem;\n          }\n        '
        )
      );
    }
  }]);

  return AlgoliaSearch;
}(React__default['default'].Component);

AlgoliaSearch.propTypes = {
  searchState: PropTypes__default['default'].object,
  resultsState: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].array]),
  onSearchStateChange: PropTypes__default['default'].func,
  createURL: PropTypes__default['default'].func,
  indexName: PropTypes__default['default'].string,
  searchClient: PropTypes__default['default'].object,
  refinementAttributes: PropTypes__default['default'].array
};

module.exports = AlgoliaSearch;
