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

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

const headerWidth = 210;

export const LayoutHeader: StyledComponent<any, any, any> = styled(Flex)`
  position: fixed;
  top: 0;
  height: 100%;
  display: none;
  width: ${headerWidth}px;
  flex-direction: column;
  background: ${({ bg }) => bg};
  z-index: ${Z_INDEX.NAV_BAR};

  ${forDesktopUp(css`
    display: block;
  `)};
`;

export const MenuSeperator = styled.div`
  width: 54%;
  background: #333;
  opacity: 0.25;
  height: 1px;
  margin-bottom: ${space.regular}px;
`;

export const NavigationContainer = styled(Box)`
  margin-top: ${space.large}px;
  width: 100%;
`;

export const LayoutContent = css`
  ${forDesktopUp(css`
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin-left: ${headerWidth}px;
  `)};
`;

export const BasketIconWrapper = css`
  position: fixed;
  top: 0;
  z-index: ${Z_INDEX.NAV_BAR};
  width: calc(100% - 300px);
  left: ${headerWidth}px;
`;

export const BasketIcon: StyledComponent<any, any, any> = styled.span`
  padding: 5px;
  border-radius: 100%;
  height: 50px;
  width: 50px;
  text-align: center;
  margin: 10px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  background: ${(props): any => props.background};
`;

export const Logo = css`
  display: block;
  width: 94px;
  margin: auto;
  margin-top: ${space.large}px;
`;

export const SocialIcons = styled(Flex)`
  position: absolute;
  bottom: ${space.small}px;
  width: 100%;
  justify-content: center;
`;

export const NavigationList = styled(Flex)`
  flex-direction: column;
  align-items: center;
`;