import React from 'react';
import debounce from 'lodash.debounce';
import { inject, observer } from 'mobx-react';
import { CSSTransition } from 'react-transition-group';
import { css, Global } from '@emotion/core';
import { MobileOverlayProps } from './mobile-overlay.types';

import { durations } from 'utils/theme'

import * as Styles from './mobile-overlay.styles'

import { colors } from 'utils/theme';

class MobileMoverlay extends React.Component<MobileOverlayProps> {

  windowHeight: number = 0;
  isOpen: boolean  = false;

  componentDidMount(): void {
    this.windowHeight = window.innerHeight;
    // vh wont work on ios as it doesn't include native buttons at the bottom
    window.addEventListener('resize', debounce(this.setWindowHeight, 1));
  }

  componentWillUnmount(): void  {
    window.removeEventListener('resize', this.setWindowHeight);
  }

  setWindowHeight = (): void => {
    this.windowHeight = window.innerHeight;
  }

  render(): JSX.Element {
    const {
      showContent,
      children,
      backgroundColour
    } = this.props;

    const disableScroll = css`
      html { overflow: hidden !important; }
    `;

    return (
      <>
        {showContent && <Global styles={disableScroll} />}
        <CSSTransition
          in={showContent}
          timeout={durations.standard}
          classNames="fadeinout"
          unmountOnExit={true}
        >
          <Styles.OverlayContainer
            windowHeight={this.windowHeight - 70}
            background={backgroundColour || colors.backgroundDark}
          >
          {children}
          </Styles.OverlayContainer>
        </CSSTransition>
      </>
    );
  }
}

export default inject('uiStore')(observer(MobileMoverlay));