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

import theme from 'utils/theme';

import { MI_Transition } from 'utils/styles/mixins'

const itemLinkBorderTop = (colour: string) => `border-bottom: 3px solid ${colour};`
const itemLinkBorderLeft = (colour: string) => `border-left: 4px solid ${colour};`

const baseNav = css`
  ${MI_Transition('border')};
  ${MI_Transition('color')};
  display: block;
  color: ${theme.colors.textDark};
`;

const baseNavTop = css`
  ${baseNav};
  padding: ${theme.space[0]}px calc(${theme.space[5]}px / 2) ${theme.space[1]}px calc(${theme.space[5]}px / 2);
`

const baseNavMobile = css`
  ${baseNav};
  font-size: ${theme.fontSizes[4]};
  line-height: ${theme.lineHeights[3]};
`

// Will take these from a theme when the left-align menu has been fully designed. 
const baseNavLeft = css`
  ${baseNav};
  padding: 8px 30px;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
`

export const NavigationItemLinkMobile = css`
  ${baseNavMobile};
`

export const NavigationItemLinkMobileActive = css`
  ${baseNavMobile}
  color: ${theme.colors.accent};
`

export const NavigationItemLinkLeft = css`
  ${baseNavLeft};
`

export const NavigationItemLinkLeftActive = css`
  ${baseNavLeft};
  ${itemLinkBorderLeft(theme.colors.accent)};
  color: ${theme.colors.accent};
`

export const NavigationItemLinkTop = css`
  ${baseNavTop};
  ${itemLinkBorderTop('transparent')};
`;

export const NavigationItemLinkTopActive = css`
  ${baseNavTop};
  padding: ${theme.space[0]}px calc(${theme.space[5]}px / 2) ${theme.space[1]}px calc(${theme.space[5]}px / 2);
  ${itemLinkBorderTop(theme.colors.accent)};
  color: ${theme.colors.accent};
`


export const NavigationItem: any = styled(Text)`
  display: inline-block;
  text-transform: uppercase;
`;