import { _ as _toConsumableArray } from './toConsumableArray-6d9a4616.js';
import { _ as _extends } from './extends-60e0e1c6.js';
import { _ as _slicedToArray } from './slicedToArray-be2f7a22.js';
import React, { useState, useEffect, useRef } from 'react';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import { L as LazyLoad } from './index-35bdcc81.js';
import urlFor from './urlFor.js';
import { I as InfiniteScroll } from './index.es-c6222053.js';
import './_commonjsHelpers-0c4b6f40.js';
import './es6.string.iterator-bc33758b.js';
import './_to-object-b50e61c3.js';
import './_iter-detect-7e5e5ce2.js';
import './core.get-iterator-method-133dfacd.js';
import './_object-pie-133f504a.js';
import './web.dom.iterable-4109ff68.js';
import 'react-dom';
import 'prop-types';
import './index-0dbff1d1.js';

var usePrevious = function usePrevious(value) {
  var ref = useRef();
  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 = 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),
      _useState6 = _slicedToArray(_useState5, 2),
      issuesData = _useState6[0],
      setIssuesData = _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 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({}, params, {
      from: values.from,
      to: values.to
    });

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

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

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

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

export default IssueDeck;
