'use strict';

var toConsumableArray = require('./toConsumableArray-d7797c2b.js');
var _extends = require('./extends-7c86182f.js');
var slicedToArray = require('./slicedToArray-067dd3bc.js');
var React = require('react');
var Row = require('react-bootstrap/Row');
var Col = require('react-bootstrap/Col');
var Button = require('react-bootstrap/Button');
var Card = require('react-bootstrap/Card');
var index = require('./index-eadd5035.js');
var urlFor = require('./urlFor.js');
var index_es = require('./index.es-f3e47207.js');
require('./_commonjsHelpers-06173234.js');
require('./core.get-iterator-method-5643aa10.js');
require('./_iter-detect-b1df62f0.js');
require('./_object-pie-083f2dd6.js');
require('./web.dom.iterable-d98303e0.js');
require('react-dom');
require('prop-types');
require('./index-efca863c.js');

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

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Row__default = /*#__PURE__*/_interopDefaultLegacy(Row);
var Col__default = /*#__PURE__*/_interopDefaultLegacy(Col);
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
var Card__default = /*#__PURE__*/_interopDefaultLegacy(Card);

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

var IssueDeck = function IssueDeck(props) {
  var data = props.data,
      href = props.href,
      _props$imageHeight = props.imageHeight,
      imageHeight = _props$imageHeight === undefined ? null : _props$imageHeight,
      _props$imageWidth = props.imageWidth,
      imageWidth = _props$imageWidth === undefined ? null : _props$imageWidth,
      _props$imageFit = props.imageFit,
      imageFit = _props$imageFit === undefined ? null : _props$imageFit,
      Website = props.Website,
      client = props.client,
      publication = props.publication,
      query = props.query,
      params = props.params;

  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),
      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
      issuesData = _useState6[0],
      setIssuesData = _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 renderCardImage = function renderCardImage(thumbnail) {
    if (thumbnail && thumbnail.asset) {
      var url = urlFor({ client: client, source: thumbnail, imageHeight: imageHeight, imageWidth: imageWidth, imageFit: imageFit });
      return url;
    } else {
      return Website.logo;
    }
  };

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

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

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

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

      if (dataArr.length > 0) {
        setIssuesData(function (prevData) {
          return [].concat(toConsumableArray._toConsumableArray(prevData), toConsumableArray._toConsumableArray(dataArr));
        });
        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, setIssuesData, setScrolling);
      }
    }
  }, [values, prevValues, query, client, params, setIssuesData, setScrolling]);

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

  return React__default['default'].createElement(
    index_es.InfiniteScroll,
    { dataLength: issuesData && issuesData.length, next: function next() {
        return loadMore();
      }, hasMore: scrolling, scrollThreshold: 0.9 },
    React__default['default'].createElement(
      Row__default['default'],
      null,
      issuesData && issuesData.length ? issuesData.map(function (row, index$1) {
        return publication && row.identifier && row.identifier.current && React__default['default'].createElement(
          Col__default['default'],
          { md: 12, lg: 12, key: index$1 },
          React__default['default'].createElement(
            Card__default['default'],
            { className: 'queue-card journal-queue', style: { borderTop: '1px solid #EEE' } },
            React__default['default'].createElement(
              Row__default['default'],
              { style: { flexDirection: 'left' } },
              React__default['default'].createElement(
                Col__default['default'],
                { md: 12, lg: 4, className: 'body-image', style: { textAlign: 'center' } },
                row.issues.length > 0 ? React__default['default'].createElement(
                  'a',
                  { href: href + '/' + publication + '/' + row.identifier.current, style: { width: '100%' } },
                  row.thumbnail && React__default['default'].createElement(
                    index.LazyLoad,
                    { height: imageHeight },
                    React__default['default'].createElement(Card__default['default'].Img, { variant: 'top', src: renderCardImage(row.thumbnail), alt: row.name, style: { objectFit: 'contain' } })
                  )
                ) : React__default['default'].createElement(
                  'a',
                  null,
                  row.thumbnail && React__default['default'].createElement(
                    index.LazyLoad,
                    { height: imageHeight },
                    React__default['default'].createElement(Card__default['default'].Img, { variant: 'top', src: renderCardImage(row.thumbnail), alt: row.name, style: { objectFit: 'contain' } })
                  )
                )
              ),
              React__default['default'].createElement(
                Col__default['default'],
                { md: 12, lg: 8 },
                React__default['default'].createElement(
                  Card__default['default'].Body,
                  { style: { padding: '20px' }, className: 'body-text' },
                  React__default['default'].createElement(
                    Row__default['default'],
                    null,
                    React__default['default'].createElement(
                      Col__default['default'],
                      null,
                      React__default['default'].createElement(
                        Card__default['default'].Title,
                        null,
                        row.name
                      )
                    )
                  ),
                  React__default['default'].createElement(
                    Row__default['default'],
                    null,
                    React__default['default'].createElement(
                      Col__default['default'],
                      null,
                      React__default['default'].createElement(
                        'div',
                        null,
                        'Volume: ',
                        row.volume
                      )
                    )
                  ),
                  React__default['default'].createElement(
                    Row__default['default'],
                    null,
                    React__default['default'].createElement(
                      Col__default['default'],
                      null,
                      React__default['default'].createElement(
                        'div',
                        null,
                        'Number: ',
                        row.number
                      )
                    )
                  ),
                  React__default['default'].createElement(
                    Row__default['default'],
                    null,
                    row.issues.length > 0 && React__default['default'].createElement(
                      'a',
                      { style: { paddingRight: '15px', paddingLeft: '15px' }, href: href + '/' + publication + '/' + row.identifier.current },
                      React__default['default'].createElement(
                        Button__default['default'],
                        { style: { marginTop: '20px', marginRight: '1rem' }, variant: 'secondary' },
                        'View Issue'
                      )
                    ),
                    row.pdf && row.pdf.asset && React__default['default'].createElement(
                      'a',
                      { rel: 'noopener', href: row.pdf.asset.url, target: '_blank', className: 'btn btn-primary', style: { marginTop: '20px' } },
                      'Download Issue'
                    )
                  )
                )
              )
            )
          )
        );
      }) : React__default['default'].createElement(
        'div',
        null,
        React__default['default'].createElement(
          'h5',
          null,
          React__default['default'].createElement(
            'em',
            { className: 'pl-3' },
            'New content coming soon, please check back later.'
          )
        )
      )
    )
  );
};

module.exports = IssueDeck;
