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

import { SiteTheme } from 'lib';
import { rhythm } from 'utils/typography';
import { breakpoints, widths, easings, durations, BREAKPOINT_VALUES } from 'utils/theme';

import { ColourLink } from 'types/generator-site';

export const AbsoluteCover = css`
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
`;

export const AbsoluteTopLeft = css`
  position: absolute;
  top: 0;
  bottom: 0;
`

export const AbsoluteTopRight = css`
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
`

export const FullWidthHeight = css`
  width: 100%;
  height: 100%;
`
// ************** Helpers
export const DisplayBlock = css`
  display: block;
`;

export const DisplayNone = css`
  display: none;
`;

// Useful for inspecting media breakpoints.
export const BackgroundDebug = (colour: string): SerializedStyles => css`
  background: ${colour};
`

// ************** Break Points
export const forPhoneOnly = (args: SerializedStyles): SerializedStyles => css`
  @media(max-width: ${BREAKPOINT_VALUES.SMALL - 1}px) {
    ${css(args)};
  }
`;

export const forTabletDown = (args: SerializedStyles): SerializedStyles => css`
  @media(max-width: ${BREAKPOINT_VALUES.MEDIUM}px) {
    ${css(args)};
  }
`

export const forTabletUp = (args: SerializedStyles): SerializedStyles => css`
  @media(min-width: ${BREAKPOINT_VALUES.SMALL + 1}px) {
    ${css(args)};
  }
`;

export const forTabletOnly = (args: SerializedStyles): SerializedStyles => css`
  @media(min-width: ${BREAKPOINT_VALUES.SMALL}px) and (max-width: ${BREAKPOINT_VALUES.LARGE}px) {
    ${css(args)};
  }
`;

export const forDesktopUp = (args: SerializedStyles): SerializedStyles => css`
  @media(min-width: ${BREAKPOINT_VALUES.MEDIUM + 1}px) {
    ${css(args)}
  }
`;

export const addTintedOverlay = (isTinted: boolean, color: ColourLink, opacity: number): SerializedStyles => {
  return css` ${isTinted && `
    position: relative;

    &:after {
      content: '';
      top: 0;
      left: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: ${opacity / 100};
      background: ${SiteTheme.setColour(color, 'black')};
    }
  `} `;
};

// ************** Micro Transitions
export const MI_Transition = (element: string, duration: number = durations.standard) => css`
  transition: ${element} ${duration}ms ${easings.easeIn};
`

export const MI_IconHover = css`
  ${MI_Transition(`opacity`)};
  opacity: 1;
  :hover {
    cursor: pointer;
    opacity: 0.6;
  }
`;

export const BackgroundCover = css`
  background-size: cover;
  background-position: center center;
`;

export const FluidContainer: StyledComponent<any, any, any> = styled(Box)`
  margin: 0 auto;
  width: 100%;
  max-width: calc(${(props: any): any => props.maxWidth || `${widths.container}px` });

  padding: 0 ${rhythm(1/2)};

  ${forDesktopUp(css`
    padding: 0;
  `)};
`;

export const CappedFluidContainer: StyledComponent<any, any, any> = styled(Box)`
  margin: 0 auto;
  width: 100%;
  padding: 0 ${rhythm(1)};
  max-width: calc(${`${widths.container}px` });

  @media (max-width: ${props => props.width | widths.maxScreen}px) {
    padding: 0;
    max-width: 100%;
  }
`

export const ChevronRight = css`
  position: relative;

  &:after {
    content: '›';
    margin-left: 6px;
    font-size: 27px;
    position: absolute;
    top: -12px;
    font-weight: 100;
    height: 0px;
  }
`;

export const DisableScroll = css`
  html {
    position: fixed;
    overflow-y: scroll !important;
    max-height: 100vh;
  }
`;

export const FadeInOutTransitionGroup = css`
  &.fadeinout-enter {
    opacity: 0;
  }

  &.fadeinout-enter.fadeinout-enter-active {
    opacity: 1;
    ${MI_Transition('opacity', durations.standard)}
  }

  &.fadeinout-enter-done {
    opacity: 1;
  }

  &.fadeinout-exit {
    opacity: 1;
  }

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

export const FadeIn = css`
  &.fade-enter {
    opacity: 0;
  }

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

  &.fade-enter-done {
    opacity: 1;
  }

  &.fade-exit {
    opacity: 1;
  }

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

export const ShiftIn = css`
  @keyframes shiftin {
    0% {
      transform: translateY(30px);
      @media (max-width: ${breakpoints.large}) {
        transform: translateY(20px);
      }
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  animation: ${durations.standard}ms ${easings.easeIn} shiftin;
`;

export const SlideInOut = css`
  &.slide-enter {
    transform: translateX(0);
  }

  &.slide-enter.slide-enter-active {
    transform: translateX(-100%);
    transition: transform 200ms ${easings.easeIn};
  }

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

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

  &.slide-exit.slide-exit-active {
    transform: translateX(0);
  }
`;