import React from 'react';
import { Box } from '@rebass/emotion';
import { css } from '@emotion/core';
import { CSSTransition } from 'react-transition-group';
import { easings, colors, breakpoints } from 'utils/theme';
import { Z_INDEX } from 'utils/constants/z-indexes';

interface OverlayProps {
  isActive: boolean;
  children?: React.ReactNode;
  onClickHandle: () => void;
}

const fadeOpacity: number = 0.7;

export default ({ isActive, onClickHandle, children }: OverlayProps): JSX.Element => (
  <>
    <CSSTransition
      in={isActive}
      timeout={300}
      classNames="fade"
      unmountOnExit={true}
    >
      <Box
        onClick={onClickHandle}
        className="fade"
        css={css`
          position: fixed;
          top: 0;
          bottom: 0;
          width: 100%;
          z-index: ${Z_INDEX.OVERLAY};

          @media (min-width: ${breakpoints.medium}) {
            background: ${colors.black};
          }

          :hover {
            cursor: pointer;
          }

          &.fade-enter {
            opacity: 0.01;
          }
          &.fade-enter-done {
            opacity: ${fadeOpacity};
          }
          &.fade-enter-active {
            opacity: ${fadeOpacity};
            transition: opacity .3s ${easings.easeIn};
          }
          &.fade-exit {
          opacity: ${fadeOpacity};
          }
          &.fade-exit-active {
            opacity: 0.01;
            transition: opacity .3s ${easings.easeIn};
          }
      `}
      >
        {children}
      </Box>
    </CSSTransition>
  </>
);