import { useMemo } from 'react';
import PropTypes from 'prop-types';
import { palettes as electionPalettes } from "../../../utils/colors/electionPalettes.js";
import StripedPattern from './StripedPattern';
import styles from './styles.module.scss';

/**
 * Textured patterns for various SVG fills.
 */
const VectorTexture = function VectorTexture(props) {
  const {
    palettes,
    inline
  } = props;
  const stripes = useMemo(() => [...palettes.map(color => ({
    color,
    size: 'small'
  })), ...palettes.map(color => ({
    color,
    size: 'medium'
  }))], [palettes]);
  const defs = <defs>
      {stripes.map(({
      color,
      size
    }) => <StripedPattern key={`${color}-${size}`} color={color} size={size} />)}
    </defs>;
  if (inline) return defs;
  return <svg className={styles.canvas}>
      {defs}
    </svg>;
};
VectorTexture.defaultProps = {
  palettes: Object.keys(electionPalettes),
  inline: false
};
VectorTexture.propTypes = {
  /**
   * The election palettes to render vector textures for
   */
  palettes: PropTypes.arrayOf(PropTypes.oneOf(Object.keys(electionPalettes))),
  /**
   * Render the patterns inline in an SVG
   */
  inline: PropTypes.bool
};
export default VectorTexture;