import React, { memo, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { defineMessages, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import InfiniteScroll from 'react-infinite-scroller';
import { compose, bindActionCreators } from 'redux';
import { createStructuredSelector } from 'reselect';
import ListGroup from 'react-bootstrap/ListGroup';
import { FaComments } from 'react-icons/fa';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import styled from 'styled-components';
import { u as useInjectReducer, H as H2 } from './index-9c274173.js';
import { u as useInjectSaga } from './request-a3c74421.js';
import { b as makeSelectTopicsList, l as loadTopicsActionsCreator, t as topicsListReducer, a as topicsData } from './saga-f1165c7a.js';
import { h as history } from './TopicsListComponent-fa574397.js';
import 'hoist-non-react-statics';
import 'invariant';
import 'lodash';
import 'immer';
import 'redux-saga/effects';
import 'sanitize.css/sanitize.css';
import 'react-router-dom';
import 'connected-react-router';
import 'redux-saga';
import 'history';

const CounterText = styled.div.withConfig({
  displayName: "TopicListItem__CounterText",
  componentId: "sc-9of5q8-0"
})(["font-size:0.7rem;"]);

function TopicListItem(props) {
  return /*#__PURE__*/React.createElement(ListGroup.Item, {
    action: true,
    onClick: props.onClick
  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
    md: 1
  }, /*#__PURE__*/React.createElement(FaComments, {
    size: 32
  })), /*#__PURE__*/React.createElement(Col, {
    md: 10
  }, /*#__PURE__*/React.createElement("h4", null, props.item.title), props.item.description), /*#__PURE__*/React.createElement(Col, {
    md: 1
  }, /*#__PURE__*/React.createElement(CounterText, null, props.item.threads_counter), /*#__PURE__*/React.createElement(CounterText, null, "Threads")))));
}

TopicListItem.propTypes = {
  item: PropTypes.any,
  onClick: PropTypes.func
};

const Section = styled.section.withConfig({
  displayName: "Section",
  componentId: "glq6sp-0"
})(["margin:3em auto;&:first-child{margin-top:0;}"]);

const CenteredSection = styled(Section).withConfig({
  displayName: "CenteredSection",
  componentId: "sc-1hnw32i-0"
})(["text-align:center;"]);

/*
 * HomePage Messages
 *
 * This contains all the text for the HomePage component.
 */
const scope = 'boilerplate.containers.HomePage';
var messages = defineMessages({
  topicsList: {
    id: `${scope}.topics`,
    defaultMessage: 'Topics'
  }
});

/*
 * TopicsPage
 *
 * This is the first thing users see of our App, at the '/' route
 */
const key = 'topics';
function TopicsList({
  topicListActions,
  topicsList,
  history: _history
}) {
  useInjectReducer({
    key,
    reducer: topicsListReducer
  });
  useInjectSaga({
    key,
    saga: topicsData
  });
  const [topics, setTopics] = useState([]);
  const [hasMoreItems, setHasMoreItems] = useState(false);
  const [nextHref, setNextHref] = useState(null);
  useEffect(() => {
    // refresh topics from server
    topicListActions.loadTopics();
    return () => {
      // clear topics list while unmount
      topicListActions.topicsListLoaded(false);
    };
  }, []);

  const loadNextPage = () => {
    if (hasMoreItems) {
      // if we call next page setHasMore item false and waiting for a server response
      setHasMoreItems(Boolean(false));
      topicListActions.loadTopics(nextHref);
    }
  };

  const onTopicClick = (e, slug) => {
    history.push(`/topics/${slug}`);

    if (_history) {
      // parent app history
      _history.push({
        pathname: `/topics/${slug}`
      });
    }
  };

  useEffect(() => {
    if (topicsList) {
      setTopics([...topics, ...topicsList.results]);
      setHasMoreItems(Boolean(topicsList.next));
      setNextHref(topicsList.next);
    }
  }, [topicsList]);
  let items = [];

  if (topics) {
    items = topics.map(item => /*#__PURE__*/React.createElement(TopicListItem, {
      onClick: e => {
        onTopicClick(e, item.slug);
      },
      key: item.slug,
      item: item
    }));
  } // console.log('topics loaded')


  return /*#__PURE__*/React.createElement("article", null, /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("title", null, "Topics List"), /*#__PURE__*/React.createElement("meta", {
    name: "description",
    content: "React comments Django topics List"
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CenteredSection, null, /*#__PURE__*/React.createElement(H2, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.topicsList))), /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(InfiniteScroll, {
    pageStart: 0,
    loadMore: loadNextPage,
    hasMore: hasMoreItems // loader={<div key={this.state.nextHref} style={{clear: 'both'}} />} // fix https://github.com/CassetteRocks/react-infinite-scroller/issues/14#issuecomment-225835845

  }, /*#__PURE__*/React.createElement(ListGroup, null, items)))));
}
TopicsList.propTypes = {
  topicListActions: PropTypes.shape({
    loadTopics: PropTypes.func.isRequired,
    topicsListLoaded: PropTypes.func.isRequired
  }).isRequired,
  topicsList: PropTypes.oneOfType([PropTypes.object, PropTypes.bool])
};
const mapStateToProps = createStructuredSelector({
  topicsList: makeSelectTopicsList() // username: makeSelectUsername(),
  // loading: makeSelectLoading(),
  // error: makeSelectError(),

});
function mapDispatchToProps(dispatch) {
  return {
    topicListActions: bindActionCreators(loadTopicsActionsCreator, dispatch)
  };
}
const withConnect = connect(mapStateToProps, mapDispatchToProps);
var index = compose(withConnect, memo)(TopicsList);

export default index;
export { TopicsList, mapDispatchToProps };
//# sourceMappingURL=index-d823448a.js.map
