import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Pattern extends Component {
  static DEFAULT_COLOR = '#1b4686';

  getClassName() {
    const { className, backgroundImage } = this.props;
    let componentClassName = 'Pattern';
    componentClassName += backgroundImage ? '' : ' Pattern--default';
    componentClassName += className ? ` ${className}` : '';

    return componentClassName;
  }

  getStyle() {
    const { backgroundImage, repeat, color } = this.props;
    const isNotDefaultColor = color && color !== Pattern.DEFAULT_COLOR;
    const style = {};

    if (isNotDefaultColor) {
      style.backgroundColor = color;
      style.backgroundImage = 'none';
    }
    if (backgroundImage) {
      style.backgroundImage = `url(${backgroundImage})`;
      style.backgroundAttachment = 'fixed';
      if (repeat) {
        style.backgroundRepeat = 'repeat';
        style.backgroundSize = '300px auto';
      } else {
        style.backgroundSize = 'cover';
      }
    }

    return style;
  }

  render() {
    const { children } = this.props;
    return (
      <div className={this.getClassName()} style={this.getStyle()}>
        {children}
      </div>
    );
  }
}

Pattern.propTypes = {
  /** the content of the page */
  children: PropTypes.any.isRequired,
  className: PropTypes.string,
  backgroundImage: PropTypes.string,
  repeat: PropTypes.bool,
  color: PropTypes.string,
};

Pattern.defaultProps = {
  className: null,
  backgroundImage: '',
  repeat: false,
  color: '',
};

export default Pattern;