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

/**
 * The goal of this module is to show a state’s election calendar. We show
 * all dates at all times, but if a date is past it gets a different
 * treatment.
 */
const CalendarGroup = function CalendarGroup(props) {
  const {
    wrap,
    heading,
    events
  } = props;
  if (!events) return null;
  const wrapClasses = {
    wrap,
    wrapAuto: wrap === 'auto',
    noWrap: !wrap
  };
  return <div className={cls('state-cal', wrapClasses)}>
      <IfActive active={!!heading}>
        <p className={cls('overline', 'mb-4')}>
          {heading}
        </p>
      </IfActive>
      <div className={cls('scroll')}>
        <div className={cls('container')}>
          {events.map(d => <DateCard key={d.id} {...d} />)}
        </div>
      </div>
    </div>;
};
CalendarGroup.defaultProps = {
  wrap: false,
  heading: undefined,
  events: []
};
CalendarGroup.propTypes = {
  /**
   * Whether to wrap the cards or scroll them
   */
  wrap: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['auto'])]),
  /**
   * Override heading
   */
  heading: PropTypes.string,
  /**
   * Override heading
   */
  events: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    date: PropTypes.string.isRequired,
    parties: PropTypes.string.isRequired,
    isCaucus: PropTypes.bool,
    officesDecided: PropTypes.string,
    notes: PropTypes.string
  }))
};
export default CalendarGroup;