import { createGlobalStyle, css, DefaultTheme, FlattenInterpolation } from 'styled-components';
import reboot from 'styled-reboot';

import nProgress from '../components/shared/NProgress.style';
import fonts from './fonts';
import {  mediaMin } from './mixins';

export interface EasyblueTheme {
  colors: {
    white: string;
    black: string;
    darkGrey: string;
    grey2: string;
    grey: string;
    lightGrey: string;
    darkBlue: string;
    blue: string;
    lightBlueSecond: string;
    lightBlue: string;
    cyan: string;
    red: string;
    lightRed: string;
    orange: string;
    yellow: string;
    green: string;
    purple: string;
  };
  gradient: {
    blue: string;
    yellow: string;
  };
  shadow: string;
  fonts: {
    quicksandBold: FlattenInterpolation<string>;
    quicksandRegular: FlattenInterpolation<string>  ;
    ubuntuBold: FlattenInterpolation<string>;
    ubuntuRegular: FlattenInterpolation<string>;
    sizes: {
      1: string;
      2: string;
      3: string;
      4: string;
      5: string;
      6: string;
    };
  };
}

const theme: EasyblueTheme = {
  colors: {
    white: '#FFFFFF',
    black: '#001E38',
    darkGrey: '#7C8E9D',
    grey2: '#B2BBC3',
    grey: '#CBD2D8',
    lightGrey: '#F8F8F8',
    darkBlue: '#025FB9',
    blue: '#1E8CF8',
    lightBlue: '#F3F9FF',
    lightBlueSecond: '#C7E2FA',
    cyan: '#13E5FF',
    red: '#FF3338',
    lightRed: '#FFCED0',
    orange: '#FF8E00',
    yellow: '#FFCD3E',
    green: '#0EF8A5',
    purple: '#392EF9'
  },
  gradient: {
    blue: 'linear-gradient(to right, #1E8CF8, #392EF9)', //blue to purple
    yellow: 'linear-gradient(to right, #FFCD3E, #FF8E00)', //yellow to orange
  },
  shadow: '0 0 16px 0 rgba(0, 30, 56, 0.1)',
  fonts: {
    quicksandBold: css`
      font-weight: 700;
      font-family: 'Quicksand', sans-serif;
    `,
    quicksandRegular: css`
      font-weight: 400;
      font-family: 'Quicksand', sans-serif;
    `,
    ubuntuBold: css`
      font-weight: 700;
      font-family: 'Ubuntu', sans-serif;
    `,
    ubuntuRegular: css`
      font-weight: 400;
      font-family: 'Ubuntu', sans-serif;
    `,
    sizes: {
      1: '3rem',
      2: '2rem',
      3: '1.5rem',
      4: '1.125rem',
      5: '.9rem',
      6: '.75rem',
    }
  }
};

export default theme;

const rebootCSS = reboot({
  black: theme.colors.black,
  bodyColor: theme.colors.black,
  bodyBg: theme.colors.white,
  fontFamilyBase: '\'Ubuntu\', sans-serif',
  fontSizeBase: theme.fonts.sizes[5],
  lineHeightBase: 1.6,
  linkHoverDecoration: 'none',
  linkColor: theme.colors.blue,
  linkHoverColor: theme.colors.darkBlue
});

export const GlobalStyle = createGlobalStyle<{ theme: { default: DefaultTheme } }>`
  ${rebootCSS};
  ${nProgress};
  ${fonts}
  
  :root {
    font-size: 16px;
  }

  html {
    -webkit-font-smoothing: antialiased;
  }

  body {
    width: 100%;
  }

  label,
  a,
  button {
    cursor: pointer;
  }

  button:focus,
  textarea:focus,
  input:focus {
    outline: 0;
  }
  
  .text-center {
    text-align: center;
  }

  .mb {
    margin-bottom: 40px;
  }

  div.main {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  h1,
  h2,
  h3,
  h4 {
    &,
    strong {
      ${props => props.theme.default.fonts.quicksandBold};
    }
  }

  h1 {
    font-size: ${props => props.theme.default.fonts.sizes[2]};
  }

  h2 {
    font-size: ${props => props.theme.default.fonts.sizes[3]};
  }

  h3 {
    font-size: ${props => props.theme.default.fonts.sizes[3]};
  }

  h4 {
    font-size: ${props => props.theme.default.fonts.sizes[4]};
  }

  h5 {
    font-size: ${props => props.theme.default.fonts.sizes[5]};
  }

  small {
    font-size: ${props => props.theme.default.fonts.sizes[6]};
  }
  
  ${mediaMin.small(css`
    h1 {
      font-size: ${props => props.theme.default.fonts.sizes[1]};
    }
  
    h2 {
      font-size: ${props => props.theme.default.fonts.sizes[2]};
    }
  `)}

   strong,
   b,
  .bold {
    ${props => props.theme.default.fonts.ubuntuBold};
  }

  hr {
    border: none;
    border-bottom: 1px solid ${props => props.theme.default.colors.grey};
    margin: 20px 0;
  }

  a {
    font-weight: 500;
  }

  a:not([href]):not([tabindex]),
  a:visited,
  a {
    color: ${props => props.theme.default.colors.blue};
    
    &:active,
    &:hover {
      color: ${props => props.theme.default.colors.darkBlue};
    }
  }

  input::placeholder {
    color: ${props => props.theme.default.colors.grey2};
  }

  button.same-link {
    cursor: pointer;
    margin-top: 5px;
    ${props => props.theme.default.fonts.ubuntuBold};
    color: ${props => props.theme.default.colors.blue};
    border: none;
    background: none;
    display: inline;
    padding: 0;
  }

  .color-blue {
    color: ${props => props.theme.default.colors.blue};
  }

  .color-grey {
    color: ${props => props.theme.default.colors.darkGrey};
  }

  .color-black {
    color: ${props => props.theme.default.colors.black};
  }

  .__react_component_tooltip {
    background-color: ${props => props.theme.default.colors.black}!important;
    padding: 20px!important;
    max-width: 300px;
  }
  
  .emoji {
    vertical-align: text-bottom;
    height: 1.3rem;
  }
`;