import React from 'react';
import { number, arrayOf, func } from 'prop-types';
import styled from 'styled-components';
import { DARK_TRANSPARENT, TRANSITION_FAST } from '@vincent_za/styles';

const Wrap = styled.div`
 visibility: hidden;
  z-index: 2;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: transparent;
  transition: background-color ${TRANSITION_FAST};

  ${props => props.isOverlayVisible && `
    visibility: visible;
    background-color: ${DARK_TRANSPARENT};
  `}
`;

class Overlay extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (nextProps.activeOverlays !== this.props.activeOverlays) return true;
    return false;
  }

  render() {
    const { activeOverlays, onOverlayHideAll } = this.props;
    return <Wrap isOverlayVisible={activeOverlays.length > 0} onClick={onOverlayHideAll} />;
  }
}

Overlay.propTypes = {
  activeOverlays: arrayOf(number).isRequired,
  onOverlayHideAll: func.isRequired,
};

export default Overlay;
