import styled, { StyledComponent } from '@emotion/styled';
import { Box } from '@rebass/emotion';
import hexToRgba from 'hex-rgba';

import { space, colors, fontSizes, breakpoints, easings, durations } from 'utils/theme';
import { FluidContainer, MI_Transition } from 'utils/styles/mixins';

import Button from 'components/button'
import { Z_INDEX } from 'utils/constants/z-indexes';

const bottomBorderColour = hexToRgba(colors.textDark, 30);

export const CloseMenuText = styled(Box)`
  margin: ${space.small}px ${space.small}px 0px ${space.small}px;
  font-size: ${fontSizes.xSmall}px;
  padding-bottom: ${space.large}px;
  
  border-bottom: 2px solid ${bottomBorderColour};
`;

export const CheckoutButton = styled(Button)`
  color: #fff;
`;

export const Container: StyledComponent<any, any, any> = styled(FluidContainer)`
  height: 100%;
  position: fixed;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: ${colors.backgroundDark};
  top: 70px;
  bottom: 0;
  z-index: ${Z_INDEX.BASKET};
  width: 100%;

  &.basket-transition-enter {
    opacity: 0;
  }

  &.basket-transition-enter.basket-transition-enter-active {
    opacity: 1;
    /* Strangely I can't use the mixin here (as below) or the transition doesn't work on exit  */
    transition: opacity ${durations.standard}ms ${easings.easeIn};
  }

  &.basket-transition-enter-done {
    opacity: 1;
  }

  &.basket-transition-exit {
    opacity: 1;
  }

  &.basket-transition-exit-active {
    ${MI_Transition('opacity', durations.standard)}
    opacity: 0;
  }

  @media (min-width: ${breakpoints.medium}) {
    position: fixed;
    width: 530px;
    left: 100%;
    top: 0;

    &.basket-transition-enter {
      transform: translateX(0);
    }

    &.basket-transition-enter.basket-transition-enter-active {
      transform: translateX(-100%);
      transition: transform ${durations.standard} ${easings.easeIn};
    }

    &.basket-transition-enter-done {
      transform: translateX(-100%);
    }

    &.basket-transition-exit {
      transform: translateX(-100%);
    }

    &.basket-transition-exit-active {
      transform: translateX(0);
      transition: transform ${durations.standard} ${easings.easeIn};
    }
  }
`;