import { _ as _defineProperty } from './defineProperty-8c30428f.js';
import { _ as _slicedToArray } from './slicedToArray-6ebcbfea.js';
import React__default, { useState, useEffect } from 'react';
import { Spinner, Container, Row, Col } from 'react-bootstrap';
import { I as InfiniteScroll } from './index.es-a6137319.js';
import { V as VisibilitySensor } from './visibility-sensor-72fd8f8b.js';
import { m as main_43 } from './main-1894c974.js';
import { useRouter } from 'next/router';
import { l as lib_3 } from './index-f0fc23eb.js';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
import './_commonjsHelpers-0c4b6f40.js';
import './define-property-5f1bda73.js';
import './core.get-iterator-method-ea258bb1.js';
import './web.dom.iterable-ab4dea5c.js';
import 'react-dom';
import './events-6c3a7a63.js';
import 'prop-types';

var css = "#CMEDeck-module_ceToggles__1QFCs {\n    display: flex;\n    padding: 1rem;\n  }\n  #CMEDeck-module_ceToggles__1QFCs div {\n    box-sizing: border-box;\n    padding: 0.5rem;\n    width: 50%;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-end;\n    justify-content: center;\n    cursor: pointer;\n    border-bottom: 3px solid #fff;\n  }\n  #CMEDeck-module_ceToggles__1QFCs div:hover {\n    opacity: 1 !important;\n    border-color: #cecece;\n  }\n  #CMEDeck-module_ceToggles__1QFCs div p {\n    margin: 0;\n    font-weight: 700;\n    width: 100%;\n    text-align: center;\n    font-size: 1rem;\n  }\n  #CMEDeck-module_ceToggles__1QFCs div img {\n    width: 100%;\n    max-width: 10rem;\n  }\n\n  .CMEDeck-module_cardImage__3yM5u{\n    width: 268px;\n    max-width: 100%;\n    border-radius: 0 0 0 10%;\n    margin-bottom: 20px;\n    margin-top: 10px;\n    border-top: 1px solid #EEE;\n  }\n  .CMEDeck-module_cardText__2zCzZ{\n    font-size:22px;\n    font-weight: 500;\n\n  }\n  @media (max-width: 500px){\n    .CMEDeck-module_cardText__2zCzZ{\n      font-size: 12px;\n      font-weight: 500;\n    }\n  }";
var styles = { "ceToggles": "CMEDeck-module_ceToggles__1QFCs", "cardImage": "CMEDeck-module_cardImage__3yM5u", "cardText": "CMEDeck-module_cardText__2zCzZ" };
styleInject(css);

var itemsPerPage = 10;

var CMEDeck = function CMEDeck(_ref) {
  var _ref$autoScroll = _ref.autoScroll,
      autoScroll = _ref$autoScroll === undefined ? true : _ref$autoScroll,
      _ref$variant = _ref.variant,
      variant = _ref$variant === undefined ? 'left' : _ref$variant,
      rightItems = _ref.rightItems,
      _ref$seoPaginate = _ref.seoPaginate,
      seoPaginate = _ref$seoPaginate === undefined ? true : _ref$seoPaginate,
      pageview = _ref.pageview,
      _ref$enablePer = _ref.enablePer,
      enablePer = _ref$enablePer === undefined ? true : _ref$enablePer,
      perData = _ref.perData,
      _ref$enablePtce = _ref.enablePtce,
      enablePtce = _ref$enablePtce === undefined ? false : _ref$enablePtce,
      ptceData = _ref.ptceData;

  var router = useRouter();

  var _useState = useState(true),
      _useState2 = _slicedToArray(_useState, 2),
      isLoading = _useState2[0],
      setIsLoading = _useState2[1];

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

  var _useState5 = useState(router && router.query && router.query.page ? parseInt(router.query.page) : 1),
      _useState6 = _slicedToArray(_useState5, 2),
      currentPage = _useState6[0],
      setCurrentPage = _useState6[1];

  var _useState7 = useState([]),
      _useState8 = _slicedToArray(_useState7, 2),
      data = _useState8[0],
      setData = _useState8[1];

  var _useState9 = useState(itemsPerPage),
      _useState10 = _slicedToArray(_useState9, 2),
      to = _useState10[0],
      setTo = _useState10[1];

  var _useState11 = useState(enablePer ? 'per' : 'ptce'),
      _useState12 = _slicedToArray(_useState11, 2),
      active = _useState12[0],
      setActive = _useState12[1];

  var getData = function getData() {
    if (active == 'per') {
      setIsLoading(true);
      var currentData = void 0;
      if (to >= perData.length - 1) {
        currentData = perData.slice(0, perData.length);
      } else {
        currentData = perData.length && perData.slice(0, to);
      }
      setIsLoading(false);
      setData(currentData);
      if (data.length == perData.length) setScrolling(false);
    } else {
      setIsLoading(true);
      var _currentData = void 0;
      if (to >= ptceData.length - 1) {
        _currentData = ptceData.slice(0, ptceData.length);
      } else {
        _currentData = ptceData.length && ptceData.slice(0, to);
      }
      setIsLoading(false);
      setData(_currentData);
      if (data.length == ptceData.length) setScrolling(false);
    }
  };

  var changePageNumber = function changePageNumber(pageNumber) {
    if (seoPaginate) {
      var path = router.asPath;
      var qrIndex = path.indexOf('?');
      var pathname = router.pathname;
      var queryString = '';

      if (qrIndex > 0) {
        path = path.substring(1, qrIndex);

        var partialQS = router.asPath.substring(qrIndex + 1);
        var partialQSArr = partialQS.split('&');

        // exclude page=xxx from query string
        partialQSArr.map(function (item) {
          var itemArr = item.split('=');
          var key = itemArr[0];
          var val = itemArr[1];

          if (key !== 'page') {
            queryString += (queryString.length === 0 ? '' : '&') + key + '=' + val;
          }
        });
      }

      if (queryString.length > 0) {
        path += '?' + queryString;
      }

      pageNumber = parseInt(pageNumber);

      if (currentPage !== pageNumber) {
        lib_3.refresh();

        setCurrentPage(pageNumber);
        if (path[0] !== '/') {
          path = '/' + path;
        }
        var newPath = pageNumber === 1 ? '' + path : path + '?page=' + pageNumber;

        if (pageview) {
          pageview(newPath);
        }
        router.push(pathname, newPath, {
          shallow: true
        });
      }
    }
  };

  var loadMore = function loadMore() {
    console.log('am i getting called loadmore');
    setTo(function (prevTo) {
      return prevTo + itemsPerPage;
    });
  };
  useEffect(function () {
    console.log('is this useEffect getting called');
    getData();
  }, [to, active]);

  var cardLoader = function cardLoader() {
    var numberOfItemsBeforeAd = 6;
    // let style = active === 'per' &&
    return React__default.createElement(
      'div',
      null,
      React__default.createElement(
        'div',
        { id: styles.ceToggles },
        enablePer && React__default.createElement(
          'div',
          { onClick: function onClick() {
              return setActive('per');
            }, style: { borderColor: active === 'per' && '#10222e', filter: active !== 'per' && 'grayscale(1)', opacity: active !== 'per' && 0.5 } },
          React__default.createElement('img', { src: 'https://gotoper-com.s3.amazonaws.com/_media/_image/PER_Logo.svg', style: { width: '100%', maxWidth: '10rem', marginBottom: '1rem' }, alt: 'per logo' }),
          React__default.createElement(
            'p',
            { style: { margin: '0', fontWeight: '700', width: '100%', textAlign: 'center', fontSize: '1rem' } },
            'Physician Education'
          )
        ),
        enablePtce && React__default.createElement(
          'div',
          { onClick: function onClick() {
              return setActive('ptce');
            }, style: { borderColor: active === 'ptce' && '#10222e', filter: active !== 'ptce' && 'grayscale(1)', opacity: active !== 'ptce' && 0.5 } },
          React__default.createElement('img', { src: 'https://ptce.s3.amazonaws.com/_media/_image/PTCE_Logo_Mocks_030220v4_PTCE_ALL_PTCE.png', alt: 'ptce logo' }),
          React__default.createElement(
            'p',
            null,
            'Pharmacist Education'
          )
        )
      ),
      React__default.createElement(
        Row,
        null,
        data && data.map(function (row, index) {
          var pageNumber = Math.ceil((index + 1) / itemsPerPage);
          var baseUrl = void 0;
          if (row.brandName && row.brandName === 'AllPtce') {
            baseUrl = 'https://www.pharmacytimes.org/courses';
          } else {
            baseUrl = 'https://www.gotoper.com/courses';
          }

          if (variant === 'left') {
            var _React$createElement;

            return React__default.createElement(
              React__default.Fragment,
              { key: index },
              React__default.createElement(
                VisibilitySensor,
                {
                  partialVisibility: true,
                  onChange: function onChange(isVisible) {
                    isVisible && changePageNumber(pageNumber);
                  } },
                React__default.createElement(
                  Col,
                  { xl: 12, style: { marginBottom: '1rem' } },
                  React__default.createElement(
                    Row,
                    null,
                    React__default.createElement(
                      Col,
                      { xs: 3, sm: 4, md: 4, lg: 4, xl: 4, style: { padding: '0', borderTop: '1px solid #EEE' } },
                      React__default.createElement(
                        'a',
                        { rel: 'noopener', href: baseUrl + '/' + row.slug, target: '_blank' },
                        React__default.createElement('img', { className: styles.cardImage, src: row.thumbnail })
                      )
                    ),
                    React__default.createElement(
                      Col,
                      { xs: 9, sm: 8, md: 8, lg: 8, xl: 8, style: { paddingTop: '10px', marginBottom: '20px', borderTop: '1px solid #EEE' } },
                      React__default.createElement(
                        'a',
                        { rel: 'noopener', href: baseUrl + '/' + row.slug, target: '_blank' },
                        React__default.createElement('h4', (_React$createElement = { className: 'mb-1' }, _defineProperty(_React$createElement, 'className', styles.cardText), _defineProperty(_React$createElement, 'dangerouslySetInnerHTML', { __html: row.title }), _React$createElement)),
                        React__default.createElement(
                          'p',
                          _defineProperty({ className: 'mb-2' }, 'className', styles.cardText),
                          ' ',
                          row.expirationDate && 'Expiration Date: ' + row.expirationDate
                        ),
                        React__default.createElement('p', { dangerouslySetInnerHTML: { __html: row.intro } })
                      )
                    )
                  )
                )
              ),
              main_43 && rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && React__default.createElement(
                'div',
                { style: { margin: '0 auto' } },
                renderMobileAd(index, numberOfItemsBeforeAd)
              )
            );
          } else {
            return React__default.createElement(
              React__default.Fragment,
              { key: index },
              React__default.createElement(
                VisibilitySensor,
                {
                  partialVisibility: true,
                  onChange: function onChange(isVisible) {
                    isVisible && changePageNumber(pageNumber);
                  } },
                React__default.createElement(
                  Row,
                  { style: { margin: '0', padding: '0' } },
                  React__default.createElement(
                    Col,
                    { xs: 9, sm: 8, lg: 8, xl: 8 },
                    React__default.createElement(
                      'a',
                      { rel: 'noopener', href: row.href, target: '_blank' },
                      React__default.createElement('h4', { className: 'mb-1', style: { fontWeight: '500', fontSize: '22px' }, dangerouslySetInnerHTML: { __html: row.title } }),
                      React__default.createElement(
                        'p',
                        { className: 'mb-2' },
                        ' ',
                        row.expirationDate && 'Expiration Date: ' + row.expirationDate
                      ),
                      React__default.createElement('p', { dangerouslySetInnerHTML: { __html: row.intro } })
                    )
                  ),
                  React__default.createElement(
                    Col,
                    { xs: 3, sm: 4, lg: 4, xl: 4 },
                    React__default.createElement(
                      'a',
                      { rel: 'noopener', href: row.href, target: '_blank' },
                      React__default.createElement('img', { style: { width: '100%', borderRadius: '0 0 10% 0' }, src: row.thumbnail })
                    )
                  )
                )
              ),
              main_43 && rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && React__default.createElement(
                'div',
                { style: { margin: '0 auto' } },
                renderMobileAd(index, numberOfItemsBeforeAd)
              )
            );
          }
        })
      )
    );
  };

  var renderMobileAd = function renderMobileAd(index, numberOfItemsBeforeAd) {
    var i = ((index + 1) / numberOfItemsBeforeAd - 1) % rightItems.length;
    return React__default.createElement(
      Col,
      { md: 12, style: { display: 'flex', flex: '1 0 auto' } },
      rightItems[i].component
    );
  };

  var renderManualPagination = function renderManualPagination() {
    var currentPage = 1;
    return React__default.createElement(
      'div',
      { className: 'd-flex justify-content-between' },
      currentPage && currentPage > 1 && React__default.createElement(
        'a',
        { href: '?page=' + (currentPage - 1) },
        '<< Previous'
      ),
      React__default.createElement(
        'a',
        { href: '?page=' + (currentPage + 1) },
        'Next >>'
      )
    );
  };

  if (isLoading) {
    return React__default.createElement(
      'div',
      { style: { display: 'flex', justifyContent: 'center', marginTop: '48px' } },
      React__default.createElement(
        Spinner,
        { animation: 'border', role: 'status' },
        React__default.createElement(
          'span',
          { className: 'sr-only' },
          'Loading...'
        )
      )
    );
  }

  if (data.length > 0) {
    return React__default.createElement(
      'div',
      { className: 'contentDeck' },
      autoScroll ? React__default.createElement(
        React__default.Fragment,
        null,
        React__default.createElement(
          'style',
          { jsx: true },
          '\n                .infinite-scroll-component {\n                  overflow: hidden !important;\n                }\n              '
        ),
        React__default.createElement(
          InfiniteScroll,
          {
            dataLength: data && data.length,
            next: loadMore,
            hasMore: scrolling,
            scrollThreshold: 0.8
          },
          React__default.createElement(
            Container,
            null,
            cardLoader()
          )
        ),
        React__default.createElement(
          'noscript',
          null,
          renderManualPagination()
        )
      ) : React__default.createElement(
        React__default.Fragment,
        null,
        React__default.createElement(
          Container,
          null,
          cardLoader()
        ),
        React__default.createElement(
          'div',
          { style: { padding: '0px 10px' } },
          scrolling ? React__default.createElement(
            'button',
            {
              style: { margin: 'auto', width: '100%' },
              onClick: function onClick(e) {
                loadMore();
              } },
            'Load More'
          ) : React__default.createElement(
            'p',
            { style: { textAlign: 'center' } },
            React__default.createElement(
              'b',
              null,
              'End of data'
            )
          )
        ),
        React__default.createElement(
          'noscript',
          null,
          renderManualPagination()
        )
      )
    );
  } else {
    return React__default.createElement(
      'div',
      null,
      React__default.createElement(
        'div',
        null,
        'No data found '
      )
    );
  }
};

export { CMEDeck as default };
