import classnames from 'classnames';
import { Well } from "../../layout/index.js";
import PropTypes from "../../../utils/prop-types/index.js";
import getColor from "../../../utils/colors/getColor.js";
import classes from './styles.module.scss';

/**
 * A component that renders a background that stretches across the whole page
 * and wraps its children in a `<Well/>`. This is used on page toppers
 * for win conditions. The background color is determined by the winning party, which is passed to the `winningParty` prop of this component. There will be no spash background if the winning party is not Democrat or GOP.
 */
const TopperSplashWell = function TopperSplashWell(props) {
  const {
    winningParty,
    disableSplash,
    children
  } = props;
  const colors = {
    dem: getColor('dem-10'),
    gop: getColor('gop-10')
  };
  const splashColor = colors[winningParty];
  return <div className={classnames(classes.container, {
    [classes.hasBackground]: !!splashColor && !disableSplash
  })} style={{
    '--bg': splashColor
  }}>
      <Well>
        {children}
      </Well>
    </div>;
};
TopperSplashWell.defaultProps = {
  winningParty: undefined,
  disableSplash: false
};
TopperSplashWell.propTypes = {
  /**
   * The winning party, which is used to determine the color of the splash background.
   */
  winningParty: PropTypes.string,
  /**
   * Turn off the splash behavior
   */
  disableSplash: PropTypes.bool,
  /**
   * Children to render inside the container.
   */
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired
};
export default TopperSplashWell;