'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 = require('./extends-60837c34.js');
require('./web.dom.iterable-a0e279c1.js');
var React = require('react');
var React__default = _interopDefault(React);
require('prop-types');
var Row = _interopDefault(require('react-bootstrap/Row'));
var Col = _interopDefault(require('react-bootstrap/Col'));
var Card = _interopDefault(require('react-bootstrap/Card'));
var index_es = require('./index.es-9110add6.js');
require('react-dom');
var index$1 = require('./index-be0c82be.js');
var index$2 = require('./index-da796b8c.js');
var slicedToArray = require('./slicedToArray-8f385299.js');
var Button = _interopDefault(require('react-bootstrap/Button'));

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,
      imageHeight = props.imageHeight,
      imageWidth = props.imageWidth,
      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 urlFor = function urlFor(source) {
    var builder = index$1.imageUrlBuilder(client);
    return builder.image(source).auto('format');
  };

  var renderCardImage = function renderCardImage(thumbnail) {
    if (thumbnail && thumbnail.asset) {
      var url = urlFor(thumbnail);
      if (imageHeight) url = url.height(imageHeight);
      if (imageWidth) url = url.width(imageWidth);
      return url.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.createElement(
    index_es.InfiniteScroll,
    { dataLength: issuesData && issuesData.length, next: function next() {
        return loadMore();
      }, hasMore: scrolling, scrollThreshold: 0.9 },
    React__default.createElement(
      Row,
      null,
      issuesData && issuesData.length ? issuesData.map(function (row, index) {
        return publication && row.identifier && row.identifier.current && React__default.createElement(
          Col,
          { md: 12, lg: 12, key: index },
          React__default.createElement(
            Card,
            { className: 'queue-card journal-queue', style: { borderTop: '1px solid #EEE' } },
            React__default.createElement(
              Row,
              { style: { flexDirection: 'left' } },
              React__default.createElement(
                Col,
                { md: 12, lg: 4, className: 'body-image', style: { textAlign: 'center' } },
                row.issues.length > 0 ? React__default.createElement(
                  'a',
                  { href: href + '/' + publication + '/' + row.identifier.current, style: { width: '100%' } },
                  row.thumbnail && React__default.createElement(
                    index$2.LazyLoad,
                    { height: imageHeight },
                    React__default.createElement(Card.Img, { variant: 'top', src: renderCardImage(row.thumbnail), alt: row.name, style: { objectFit: 'contain' } })
                  )
                ) : React__default.createElement(
                  'a',
                  null,
                  row.thumbnail && React__default.createElement(
                    index$2.LazyLoad,
                    { height: imageHeight },
                    React__default.createElement(Card.Img, { variant: 'top', src: renderCardImage(row.thumbnail), alt: row.name, style: { objectFit: 'contain' } })
                  )
                )
              ),
              React__default.createElement(
                Col,
                { md: 12, lg: 8 },
                React__default.createElement(
                  Card.Body,
                  { style: { padding: '20px' }, className: 'body-text' },
                  React__default.createElement(
                    Row,
                    null,
                    React__default.createElement(
                      Col,
                      null,
                      React__default.createElement(
                        Card.Title,
                        null,
                        row.name
                      )
                    )
                  ),
                  React__default.createElement(
                    Row,
                    null,
                    React__default.createElement(
                      Col,
                      null,
                      React__default.createElement(
                        'div',
                        null,
                        'Volume: ',
                        row.volume
                      )
                    )
                  ),
                  React__default.createElement(
                    Row,
                    null,
                    React__default.createElement(
                      Col,
                      null,
                      React__default.createElement(
                        'div',
                        null,
                        'Number: ',
                        row.number
                      )
                    )
                  ),
                  React__default.createElement(
                    Row,
                    null,
                    row.issues.length > 0 && React__default.createElement(
                      'a',
                      { style: { paddingRight: '15px', paddingLeft: '15px' }, href: href + '/' + publication + '/' + row.identifier.current },
                      React__default.createElement(
                        Button,
                        { style: { marginTop: '20px', marginRight: '1rem' }, variant: 'secondary' },
                        'View Issue'
                      )
                    ),
                    row.pdf && row.pdf.asset && React__default.createElement(
                      'a',
                      { rel: 'noopener', href: row.pdf.asset.url, target: '_blank', className: 'btn btn-primary', style: { marginTop: '20px' } },
                      'Download Issue'
                    )
                  )
                )
              )
            )
          )
        );
      }) : 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 = IssueDeck;
