import PropTypes from 'prop-types';
import styled from 'styled-components';
import WaveTopFantasy from './svg/wave-top-fantasy.svg';
import WaveBottomFantasy from './svg/wave-bottom-fantasy.svg';

const defaultHeight = 140;

const WaveMap = {
  'wave-top-fantasy': WaveTopFantasy,
  'wave-bottom-fantasy': WaveBottomFantasy
};

const Root = styled.div`
  z-index: 1;
  position: relative;
  pointer-events: none;

  ${props =>
    props.absoluteTop &&
    `
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 100%;
  `}

  ${props =>
    props.absoluteBottom &&
    `
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  `};

  svg {
    position: relative;
    display: block;
    width: 100%;
    max-height: ${props => (props.height ? props.height : defaultHeight)}px;

    path {
      fill: ${props => (props.bgColor ? props.bgColor : '#212121')};
    }
  }

  ${props =>
    props.autoHeight &&
    `
    svg {
      max-height: auto;
    }
  `};
`;

const Wave = ({ name, absoluteTop, absoluteBottom, height, autoHeight, bgColor }) => {
  if (!WaveMap[name]) return null;
  const SvgWave = WaveMap[name];

  return (
    <Root
      className={name}
      absoluteTop={absoluteTop}
      absoluteBottom={absoluteBottom}
      height={height}
      autoHeight={autoHeight}
      bgColor={bgColor}
    >
      <SvgWave />
    </Root>
  );
};

Wave.propTypes = {
  name: PropTypes.oneOf(Object.keys(WaveMap)).isRequired,
  className: PropTypes.string,
  absoluteTop: PropTypes.bool,
  absoluteBottom: PropTypes.bool,
  autoHeight: PropTypes.bool,
  height: PropTypes.number,
  bgColor: PropTypes.string
};

export default Wave;