import { createGlobalStyle, css } from 'styled-components';
import reboot from 'styled-reboot';
// WARNING : do not import css in a specific page. It will break its navigation.
// import 'swiper/dist/css/swiper.min.css';
import { QontoTheme } from 'styled-components';

import fonts from './fonts';
import { mediaMin } from './mixins';

const theme: QontoTheme = {
  colors: {
    white: '#FFFFFF',
    black: '#000000',
    darkBlue: '#424660',
    purple: '#6C5AED',
    lightPurple: '#F0F1FB',
    darkPurple: '#806ED8',
    easyblueBlue: '#1E8CF8',
    lightGrey: '#424660',
    greyGradient: '#F5F6FA',
    grey: '#A0A2AF'
  },
  shadow: '0 0 35px 0 rgba(128, 110, 216, 0.1)',
  fonts: {
    thin: css`
      font-family: 'HelveticaNeue-Thin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: 100;
    `,
    light: css`
      font-family: 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: 300;
    `,
    medium: css`
      font-family: 'HelveticaNeue-Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: 300;
    `,
    sizes: {
      1: '3rem',
      2: '2.25rem',
      3: '1.5rem',
      4: '1.125rem',
      5: '1rem',
      6: '.9rem'
    }
  }
};

export default theme;

const rebootCSS = reboot({
  black: theme.colors.black,
  fontFamilyBase: '\'HelveticaNeue-Light\', \'Helvetica Neue\', Helvetica, Arial, sans-serif',
  fontSizeBase: theme.fonts.sizes[5],
  fontWeightBase: 300,
  linkColor: theme.colors.purple,
  linkHoverDecoration: 'none',
  linkHoverColor: theme.colors.darkPurple
});

export const GlobalStyle = createGlobalStyle<{ theme: { qonto: QontoTheme } }>`
  ${rebootCSS};
  ${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;
  }

  h1, h2, h3, h4, h5 {
    ${props => props.theme.qonto.fonts.thin};
    color: ${props => props.theme.qonto.colors.lightGrey};
  }

  h1 {
    font-size: ${props => props.theme.qonto.fonts.sizes[2]};
    line-height: 50px;
    ${props => props.theme.qonto.fonts.thin};
    color: ${props => props.theme.qonto.colors.purple};

    ${mediaMin.medium(css`
      line-height: 55px;
      font-size: ${props => props.theme.paykrom.fonts.sizes[1]};
    `)}

    &  + p {
      line-height: 35px;
    }
  }

  h2 {
    font-size: 2rem;
    line-height: 2rem;
    margin: 40px auto 20px;
    text-align: center;

    ${mediaMin.medium(css`
      margin: 100px auto 20px;
      font-size: ${props => props.theme.paykrom.fonts.sizes[2]};
      line-height: 4rem;
    `)}
  }

  h3 {
    font-size: ${props => props.theme.qonto.fonts.sizes[3]};
    line-height: ${props => props.theme.qonto.fonts.sizes[2]};
  }

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

  a,
  strong,
  b {
    ${props => props.theme.qonto.fonts.medium};
  }

  // Qonto toolitp style, !important is sadly mandatory... see react-tooltip doc
  .__react_component_tooltip {
    display: flex!important;
    font-size: 12px!important;
    line-height: 14px!important;
    background-color: ${props => props.theme.qonto.colors.darkBlue}!important;
    padding: 10px 20px!important;
    text-align: start!important;
    border-radius: 4px!important;
    color: ${props => props.theme.qonto.colors.white}!important;
    align-items: center!important;

    &:after {
      border: none!important;
    }
  }

  .qonto-crop {
    background: ${props => props.theme.qonto.colors.white};
    > path {
      fill: ${props => props.theme.qonto.colors.greyGradient};
    }
  }
`;