'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('./_iter-detect-60b2f026.js');
var toConsumableArray = require('./toConsumableArray-9a3476fe.js');
require('./core.get-iterator-method-f62321d4.js');
require('./_object-pie-68c5bcbc.js');
var _extends$1 = require('./extends-60837c34.js');
require('./web.dom.iterable-a0e279c1.js');
var React = require('react');
var React__default = _interopDefault(React);
require('prop-types');
var index_es = require('./index.es-9110add6.js');
require('react-dom');
require('./index-be0c82be.js');
require('./index-da796b8c.js');
require('./main-02daeefe.js');
var slicedToArray = require('./slicedToArray-8f385299.js');
require('./index-187c967e.js');
require('./smoothscroll-5054361f.js');
var SeriesSlider = require('./SeriesSlider-0a4b30a7.js');

var usePrevious = function usePrevious(value) {
  var ref = React.useRef();
  React.useEffect(function () {
    ref.current = value;
  });
  return ref.current;
};

var SeriesListingDeck = function SeriesListingDeck(props) {
  var data = props.data,
      imageHeight = props.imageHeight,
      imageWidth = props.imageWidth,
      Website = props.Website,
      client = props.client,
      query = props.query,
      params = props.params,
      parentIdentifier = props.identifier;

  var _useState = React.useState(params ? params.count : 0),
      _useState2 = slicedToArray._slicedToArray(_useState, 1),
      count = _useState2[0];

  var _useState3 = React.useState(true),
      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
      scrolling = _useState4[0],
      setScrolling = _useState4[1];

  var _useState5 = React.useState(data.series),
      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
      seriesData = _useState6[0],
      setSeriesData = _useState6[1];

  var _useState7 = React.useState({
    from: params ? params.from : 0,
    to: params ? params.to : 0,
    page: 1
  }),
      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
      values = _useState8[0],
      setValues = _useState8[1];

  var prevValues = usePrevious(values);

  var loadMore = function loadMore() {
    setValues({
      page: values.page + 1,
      from: parseInt(values.from) + parseInt(count),
      to: parseInt(values.to) + parseInt(count)
    });
  };

  var loadData = function loadData(values, query, client, params, setSeriesData, setScrolling) {
    params = _extends$1._extends({}, params, {
      from: values.from,
      to: values.to
    });

    client.fetch(query, params).then(function (dataArr) {
      if (!dataArr.series) {
        dataArr.series = [];
      }

      dataArr.series = dataArr.series.map(function (item) {
        return _extends$1._extends({}, item, {
          pageNumber: values.page
        });
      });

      if (dataArr.series.length > 0) {
        setSeriesData(function (prevData) {
          var newArr = [].concat(toConsumableArray._toConsumableArray(prevData), toConsumableArray._toConsumableArray(dataArr.series));
          return newArr;
        });
        setScrolling(true);
      } else {
        var parentScroll = document.getElementsByClassName('infinite-scroll-component')[0];
        parentScroll.style.overflow = 'hidden';
        setScrolling(false);
      }
    });
  };

  React.useEffect(function () {
    if (prevValues) {
      if (values.page !== prevValues.page && values.from !== prevValues.from && values.to !== prevValues.from) {
        loadData(values, query, client, params, setSeriesData, setScrolling);
      }
    }
  }, [values, prevValues, query, client, params, setSeriesData, setScrolling]);

  React.useEffect(function () {
    if (seriesData.length < count) {
      var parentScroll = document.getElementsByClassName('infinite-scroll-component')[0];
      parentScroll.style.overflow = 'hidden';
      setScrolling(false);
    }
  }, [seriesData, setScrolling, count]);

  return React__default.createElement(
    index_es.InfiniteScroll,
    { dataLength: seriesData && seriesData.length, next: function next() {
        return loadMore();
      }, hasMore: scrolling, scrollThreshold: 0.9 },
    React__default.createElement(
      'div',
      null,
      seriesData && seriesData.length ? React__default.createElement(
        'div',
        null,
        seriesData.map(function (series) {
          return React__default.createElement(
            'div',
            { className: 'mb-5', key: series.name },
            React__default.createElement(
              'div',
              { style: { fontSize: '20px', borderBottom: '1px solid #eee', margin: '0 .5rem', color: '373a3c' } },
              React__default.createElement(
                'a',
                { href: '/' + parentIdentifier + '/' + series.identifier.current },
                series.name
              )
            ),
            series.articles && series.articles.length == 0 && React__default.createElement(
              'p',
              { className: 'mt-2 ml-2' },
              'Please check back for more content.'
            ),
            series.articles && series.articles.length > 0 && React__default.createElement(SeriesSlider.SeriesSlider, _extends$1._extends({}, props, { dataset: series.articles, client: client }))
          );
        })
      ) : React__default.createElement(
        'div',
        null,
        React__default.createElement(
          'h5',
          null,
          React__default.createElement(
            'em',
            { className: 'pl-3' },
            'New content coming soon, please check back later.'
          )
        )
      )
    )
  );
};

module.exports = SeriesListingDeck;
