import './_commonjsHelpers-0c4b6f40.js';
import './_to-object-a4107da3.js';
import './es6.string.iterator-c990c18c.js';
import './_iter-detect-5d49a330.js';
import { _ as _toConsumableArray } from './toConsumableArray-43aa614d.js';
import './core.get-iterator-method-e1de7503.js';
import './_object-pie-33c40e79.js';
import { _ as _extends } from './extends-eb69e8ac.js';
import './web.dom.iterable-4439f05a.js';
import React__default, { useState, useEffect, useRef } from 'react';
import 'prop-types';
import { I as InfiniteScroll } from './index.es-29c1cef5.js';
import 'react-dom';
import './index-73819142.js';
import './index-5f9f807a.js';
import './main-e4a934b2.js';
import { _ as _slicedToArray } from './slicedToArray-641f241f.js';
import './index-c7e2ac95.js';
import './smoothscroll-0cd4c7a6.js';
import { S as SeriesSlider } from './SeriesSlider-f629bded.js';

var usePrevious = function usePrevious(value) {
  var ref = useRef();
  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 = useState(params ? params.count : 0),
      _useState2 = _slicedToArray(_useState, 1),
      count = _useState2[0];

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

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

  var _useState7 = useState({
    from: params ? params.from : 0,
    to: params ? params.to : 0,
    page: 1
  }),
      _useState8 = _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({}, 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({}, item, {
          pageNumber: values.page
        });
      });

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

  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]);

  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(
    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, _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.'
          )
        )
      )
    )
  );
};

export default SeriesListingDeck;
