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

import { SiteTheme } from 'lib';
import { space, widths, BREAKPOINT_VALUES } from 'utils/theme';
import { Z_INDEX } from 'utils/constants/z-indexes';
import { forDesktopUp } from 'utils/styles/mixins';

export const Article: StyledComponent<any, any, any> = styled(Box)`
`;

export const ModuleWrapper: StyledComponent<any, any, any> = styled(Box)`
  
  position: relative;
  
  /* TODO: Configure the width of the navigation bar for left aligned */
  ${({ isLeftNavigationLayout }) : any => isLeftNavigationLayout && `
    ${forDesktopUp(css`
      max-width: calc(100vw - 315px);
    `)}
  `};
  
  ${({ debugMode }) : any => debugMode && `
    border-bottom: dashed 5px ${hexToRgba('#000', 35)};
    background: ${hexToRgba(`${Math.floor(Math.random() * 99)}26${Math.floor(Math.random() * 99)}`, 20)};
  `};
  ${({ background }): any => background && `
    background: ${SiteTheme.setColour(background.backgroundColour, 'white')};
    max-width: ${background.isFullWidthBackground ? '100%' : `${widths.container}px`};
    margin-left: auto;
    margin-right: auto;
  `}
  ${({ bottomPadding, fullWidthModule }) : any => bottomPadding && `
    padding-bottom: ${space.xxlarge}px;
    ${fullWidthModule && `
      @media (max-width: ${BREAKPOINT_VALUES.LARGE}px) {
        padding-bottom: 0;
      }
    `};
  `};

  ${({ topPadding, fullWidthModule }) : any => topPadding && `
    padding-top: ${space.xxlarge}px;
    ${fullWidthModule && `
      @media (max-width: ${widths.maxScreen}px) {
        padding-top: 0;
      }
    `};
  `};
`;

  export const gridColumn: StyledComponent<any, any, any> = styled.div`
    width: ${(props: any) => props.width}px;
    background: ${hexToRgba('#000', 5)};
    border-left: dashed 2px ${hexToRgba('#000', 15)};
    border-right: dashed 2px ${hexToRgba('#000', 15)};
    height: 4300px;
    overflow-y: hidden;
    margin-left: ${(props: any) => props.index * (props.width + props.gutter)}px;
    position: absolute;
    z-index: ${Z_INDEX.DEBUG_COLUMNS};
  `;