import cx from "../../../utils/css/cx.js";
import PropTypes from 'prop-types';
import classes from './styles.module.scss';
const tags = {
  gopOnly: ['gop'],
  demOnly: ['dem'],
  demAndGop: ['dem', 'gop'],
  allPartyPrimary: ['all']
};
const cls = cx.merge(classes);

/**
 * Use this component to display color-coded diamonds based on
 * which parties' primaries on a given date/state across calendar components
 * @param {string|array} parties
 */
export default function PartyTags({
  parties,
  dark
}) {
  return <div className={cls('tags')}>
      {tags[parties].map((party, idx) => <div
    // eslint-disable-next-line react/no-array-index-key
    key={`${party}-${idx}`} style={{
      '--index': idx
    }} className={cls('tag', party, {
      dark
    })} />)}
    </div>;
}
PartyTags.defaultProps = {
  dark: false
};
PartyTags.propTypes = {
  /**
   * Which parties are running primaries
   */
  parties: PropTypes.oneOf(['gopOnly', 'demOnly', 'demCon', 'gopCon', 'demAndGop', 'allPartyPrimary']).isRequired,
  /**
   * Whether to darken tag
   */
  dark: PropTypes.bool
};