import createSelector from 'reselect';
import fp from 'lodash/fp';

export getState = state => state;

export getProps = (_, props) => props;
// ^ just including this to mention I like to make prop access explicit, as it reminds
// me there's an explicit coupling introduced by using component props in a selector.

export const getEntities => createSelector(getState, fp.get('entities'));

export const getArticles => createSelector(getEntities, fp.get('articles'));

export const getArticleIdFromProps => createSelector(getProps, fp.get('activeArticleId'));
// ^ I also like to explicity indicate (in the selector name) when
// a select is reliant on a prop in order to expose that coupling
// whenever a prop-based selector is composed with another.

export const getArticle => createSelector(
   getArticleIdFromProps,
   getArticles,
   fp.get // lodash/fp makes point-free function application particularly easy here.
);

/*
  The above selectors then get exposed on window.selectors in debug mode.
  Prop-based selectors are ignored, thus window.selectors.getEntities &
  window.selectors.getArticles will be computed and exposed on window.selectors,  
  but getArticle and getArticleIdFromProps will not.
  
  A potential solution that I often use is to store route params in Redux, so we
  could compute `activeArticle` using a selector provided by react-router-redux:
*/

export const getActiveArticle = createSelector(
  getArticles,
  createMatchSelector({ path: '/articles/:articleId' }), // https://github.com/ReactTraining/react-router/blob/master/packages/react-router-redux/modules/selectors.js
  ((articles, match) => articles[match.params.articleId]) // leaving out null checks for brevity/clarity in this example.
);