import styled, { StyledComponent } from '@emotion/styled';
import { css } from '@emotion/core';
import { Box, Text } from '@rebass/emotion';

import theme, { space, easings } from 'utils/theme';
import { DisplayNone, forDesktopUp } from 'utils/styles/mixins';
import { Z_INDEX } from 'utils/constants/z-indexes';

export const HeaderContainer = styled.nav`
  position: fixed;
  width: 100%;
  top: 0;
  z-index: ${Z_INDEX.NAV_BAR};
  ${forDesktopUp(css`
    ${DisplayNone};
  `)};
`;

export const Header: any = styled(Box)`
  width: 100%;
  min-height: 70px;
  display: flex;
  align-items: center;
  transition: ${(props: any): string => props.isMobileMenuVisible ? `background .3s  ${easings.easeIn}` : 'none'};
`;

export const Logo = css`
  display: flex;

  img {
    width: auto;
    margin: 0 auto;
    max-height: 42px;
  }
`;

export const NavigationList = styled.ul`
  flex-grow: 1;
  margin-top: 90px;
  overflow: scroll;
  text-align: center;

  -webkit-overflow-scrolling: touch;
`;

export const NavigationItemLink: StyledComponent<any, any, any> = styled(Text)`
  a {
    display: block;
    color: ${(props: any): any => props.textColour};
  }
`;

export const NavigationItem = css`
  list-style: none;
  margin-bottom: ${space.regular}px;
`;

export const SocialContainer = styled(Box)`
  padding: 10px 0 30px 0;
  text-align: center;

  a {
    margin: 0 ${theme.space[3]}px !important;
  }
`;

export const HeaderMobileOverlayContainer = styled(Box)`
  &.basket-transition-enter {
    opacity: 0;
  }

  &.basket-transition-enter.basket-transition-enter-active {
    opacity: 1;
    transition: opacity 200ms ${easings.easeIn};
  }

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

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

  &.basket-transition-exit.basket-transition-exit-active {
    opacity: 0;
  }
`