import React from 'react';
import { inject, observer } from 'mobx-react';
import { Global } from '@emotion/core';
import { Text, Flex } from '@rebass/emotion';
import { CSSTransition } from 'react-transition-group';

import Overlay from 'components/overlay';
import CloseButton from 'components/close-button';
import BasketContent from 'components/basket/components/basket-content';

import theme, { durations } from 'utils/theme';
import { DisableScroll } from 'utils/styles/mixins';
import { ShowOnLarge } from 'utils/styles/display';

import { BasketProps } from './basket.types';

import * as Styles from './basket.styles';

const Basket = (props: BasketProps): JSX.Element => {
  const { isBasketVisible } = props.uiStore!;
  return (
    <>
      <Overlay
        onClickHandle={(): void => props.uiStore!.toggleBasket()}
        isActive={isBasketVisible}
      />
      {isBasketVisible && <Global styles={DisableScroll}/>}
      <CSSTransition
        in={isBasketVisible}
        timeout={durations.standard}
        classNames="basket-transition"
        unmountOnExit={true}
      >
        <Styles.Container>
          <ShowOnLarge>
            <Styles.CloseMenuText>
              <Flex
                justifyContent="space-between"
                alignItems="center"
              >
                <Text
                  fontSize={5}
                  lineHeight={6}
                  color={theme.colors.textDark}
                  mb="0px"
                  as="h6"
                >
                  Basket
                </Text>
                <CloseButton
                  size='normal'
                  onClick={(): void => props.uiStore!.toggleBasket()}
                />
              </Flex>
            </Styles.CloseMenuText>
          </ShowOnLarge>
          <BasketContent />
        </Styles.Container>
      </CSSTransition>
    </>
  );
};

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