import PropTypes from 'prop-types';
import cx from "../../../utils/css/cx.js";
import ModuleLastUpdated from "../ModuleLastUpdated/index.js";
import useStoryRecircOptions from './useStoryRecircOptions';
import Story from './Story';
import classes from './styles.module.scss';
const cls = cx.merge(classes);

/**
 * A recirculation module that highlights Politico coverage on
 * [www.politico.com](https://www.politico.com) with rich story previews.
 * The story sources can be driven dynamically by curated story
 * collections. Generally these are driven by tag pages.
 */
const StoryRecirculation = function StoryRecirculation(props) {
  const {
    tag,
    mode
  } = props;
  const {
    stories,
    layout,
    overflow
  } = useStoryRecircOptions(tag, mode);
  const trackingOpts = {
    context: 'StoryRecirc'
  };
  return <div className={classes.container}>
      <ModuleLastUpdated />
      <h6 className={cls('heading')}>More from POLITICO</h6>
      <div className={cls('carousel-outer-container', {
      overflow
    })}>
        <div className={cls('carousel-inner-container', layout, {
        overflow
      })}>
          {stories.map((s, idx) => <Story key={s.url} tracking={{
          ...trackingOpts,
          linkName: `story-${idx + 1}`
        }} {...s} />)}
        </div>
      </div>
    </div>;
};
StoryRecirculation.defaultProps = {
  mode: 'chronological'
};
StoryRecirculation.propTypes = {
  /**
   * The ID the story collection to pull stories from.
   */
  tag: PropTypes.string.isRequired,
  /**
   * How this module selects stories to display from the collection. By default,
   * it uses the `chronological` mode, which means that it pulls stories from the
   * collection in reverse chronological order. In `even` and `odd` modes it
   * displays even- or odd-numbered stories in reverse chronological order,
   * respectively. In `random` mode it presents the stories in a random order.
   */
  mode: PropTypes.oneOf(['chronological', 'even', 'odd', 'random'])
};
export default StoryRecirculation;