import React, { memo, useEffect } from 'react';
import { Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { defineMessages, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createSelector, createStructuredSelector } from 'reselect';
import { a as makeSelectLoading, b as makeSelectError } from './selectors-2f99e0dc.js';
import { u as useInjectReducer, H as H2 } from './index-9c274173.js';
import 'hoist-non-react-statics';
import 'invariant';
import 'lodash';
import styled from 'styled-components';
import produce from 'immer';
import './TopicsListComponent-fa574397.js';
import 'sanitize.css/sanitize.css';
import 'connected-react-router';
import 'redux-saga';
import 'history';

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

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

/*
 * HomePage Messages
 *
 * This contains all the text for the HomePage component.
 */
const scope = 'boilerplate.containers.HomePage';
var messages = defineMessages({
  reactDjangoCommentsWelcome: {
    id: `${scope}.welcome.header`,
    defaultMessage: 'Welcome to the react-comments-django!'
  },
  trymeHeader: {
    id: `${scope}.tryme.header`,
    defaultMessage: 'Try me!'
  },
  trymeMessage: {
    id: `${scope}.tryme.message`,
    defaultMessage: 'Show Github repositories by'
  },
  trymeAtPrefix: {
    id: `${scope}.tryme.atPrefix`,
    defaultMessage: '@'
  }
});

/*
 * HomeConstants
 * Each action has a corresponding type, which the reducer knows and picks up on.
 * To avoid weird typos between the reducer and the actions, we save them as
 * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
 * reducers accidentally picking up actions they shouldn't.
 *
 * Follow this format:
 * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
 */
const CHANGE_USERNAME = 'boilerplate/Home/CHANGE_USERNAME';

/*
 * Home Actions
 *
 * Actions change things in your application
 * Since this boilerplate uses a uni-directional data flow, specifically redux,
 * we have these actions which are the only way your application interacts with
 * your application state. This guarantees that your state is up to date and nobody
 * messes it up weirdly somewhere.
 *
 * To add a new Action:
 * 1) Import your constant
 * 2) Add a function like this:
 *    export function yourAction(var) {
 *        return { type: YOUR_ACTION_CONSTANT, var: var }
 *    }
 */
/**
 * Changes the input field of the form
 *
 * @param  {string} username The new text of the input field
 *
 * @return {object} An action object with a type of CHANGE_USERNAME
 */

function changeUsername(username) {
  return {
    type: CHANGE_USERNAME,
    username
  };
}

/*
 * HomeReducer
 *
 * The reducer takes care of our data. Using actions, we can
 * update our application state. To add a new action,
 * add it to the switch statement in the reducer function
 *
 */

const initialState = {
  username: ''
};
/* eslint-disable default-case, no-param-reassign */

const homeReducer = (state = initialState, action) => produce(state, draft => {
  switch (action.type) {
    case CHANGE_USERNAME:
      // Delete prefixed '@' from the github username
      draft.username = action.username.replace(/@/gi, '');
      break;
  }
});

/**
 * Homepage selectors
 */

const selectHome = state => state.home || initialState;

const makeSelectUsername = () => createSelector(selectHome, homeState => homeState.username);

/*
 * HomePage
 *
 * This is the first thing users see of our App, at the '/' route
 */

const key = 'home';
const conf = window.REACT_COMMENTS_DJANGO_CONFIG;
let EMBEDDED_MODE = false;

if (conf) {
  ({
    EMBEDDED_MODE
  } = conf);
}

function HomePage({
  username,
  // loading,
  // error,
  // repos,
  onSubmitForm,
  onChangeUsername
}) {
  useInjectReducer({
    key,
    reducer: homeReducer
  });
  /*useInjectSaga({ key, saga })*/

  useEffect(() => {
    // When initial state username is not null, submit the form to load repos
    if (username && username.trim().length > 0) onSubmitForm();
  }, []);
  if (EMBEDDED_MODE) return /*#__PURE__*/React.createElement(Redirect, {
    to: "topics"
  }); // const reposListProps = {
  //   loading,
  //   error,
  //   repos,
  // }

  return /*#__PURE__*/React.createElement("article", null, /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("title", null, "Home Page"), /*#__PURE__*/React.createElement("meta", {
    name: "description",
    content: "React comments django homepage"
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CenteredSection, null, /*#__PURE__*/React.createElement(H2, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.reactDjangoCommentsWelcome)), /*#__PURE__*/React.createElement("p", null)), /*#__PURE__*/React.createElement(Section, null)));
}
HomePage.propTypes = {
  loading: PropTypes.bool,
  error: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
  repos: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
  onSubmitForm: PropTypes.func,
  username: PropTypes.string,
  onChangeUsername: PropTypes.func
};
const mapStateToProps = createStructuredSelector({
  // repos: makeSelectRepos(),
  username: makeSelectUsername(),
  loading: makeSelectLoading(),
  error: makeSelectError()
});
function mapDispatchToProps(dispatch) {
  return {
    onChangeUsername: evt => dispatch(changeUsername(evt.target.value)) // onSubmitForm: evt => {
    //   if (evt !== undefined && evt.preventDefault) evt.preventDefault()
    //   dispatch(loadRepos())
    // },

  };
}
const withConnect = connect(mapStateToProps, mapDispatchToProps);
var index = compose(withConnect, memo)(HomePage);

export default index;
export { HomePage, mapDispatchToProps };
//# sourceMappingURL=index-088447de.js.map
