// @flow
import React, { type Node } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import type { PatchworkTheme } from './theme.types';
import { Span } from '../core/typography/span';
import { getPaletteColor } from '../mixins/branding';
import FuturaPTEot from '../core/typography/fonts/FuturaPT-Book.eot';
import FuturaPTWoff from '../core/typography/fonts/FuturaPT-Book.woff';
import FuturaPTWoff2 from '../core/typography/fonts/FuturaPT-Book.woff2';
import FuturaPTTtf from '../core/typography/fonts/FuturaPT-Book.ttf';

import FuturaPTHeavyEot from '../core/typography/fonts/FuturaPT-Heavy.eot';
import FuturaPTHeavyWoff from '../core/typography/fonts/FuturaPT-Heavy.woff';
import FuturaPTHeavyWoff2 from '../core/typography/fonts/FuturaPT-Heavy.woff2';
import FuturaPTHeavyTtf from '../core/typography/fonts/FuturaPT-Heavy.ttf';

import FuturaPTObliqueEot from '../core/typography/fonts/FuturaPT-Book-Oblique.eot';
import FuturaPTObliqueWoff from '../core/typography/fonts/FuturaPT-Book-Oblique.woff';
import FuturaPTObliqueWoff2 from '../core/typography/fonts/FuturaPT-Book-Oblique.woff2';
import FuturaPTObliqueTtf from '../core/typography/fonts/FuturaPT-Book-Oblique.ttf';

import FuturaPTHeavyObliqueEot from '../core/typography/fonts/FuturaPT-Heavy-Oblique.eot';
import FuturaPTHeavyObliqueWoff from '../core/typography/fonts/FuturaPT-Heavy-Oblique.woff';
import FuturaPTHeavyObliqueWoff2 from '../core/typography/fonts/FuturaPT-Heavy-Oblique.woff2';
import FuturaPTHeavyObliqueTtf from '../core/typography/fonts/FuturaPT-Heavy-Oblique.ttf';

import OpenSansRegularTtf from '../core/typography/fonts/OpenSans-Regular.ttf';
import OpenSansBoldTtf from '../core/typography/fonts/OpenSans-Bold.ttf';

// Provides a clean CSS slate for everything inside this provider
// so that a polluted CSS host environment and/or browser styles don't
// affect the rendering of patchwork's scoped component styles.
export const Resets = styled(Span)`
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  color: ${({ theme }) =>
    getPaletteColor(theme.defaultTextColor || 'greyscale-black')};

  * {
    box-sizing: border-box;
    &:before,
    &:after {
      box-sizing: border-box;
    }
    /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix  */
    html input[type='button'],
    input[type='reset'],
    input[type='submit'] {
      -webkit-appearance: button;
      cursor: pointer;
    }
    input[type='checkbox'],
    input[type='radio'] {
      box-sizing: border-box;
      padding: 0;
    }
    input[type='search'] {
      box-sizing: border-box;
      -webkit-appearance: none;
      border-radius: 3px;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input[type='number'] {
      -moz-appearance: textfield;
    }
    input[type='search']::-webkit-search-cancel-button,
    input[type='search']::-webkit-search-decoration {
      -webkit-appearance: none;
    }

    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* stylelint-enable */

    /* For Invest, Trade, Crypto */
    @font-face {
      font-family: 'FuturaPT';
      src: url('${FuturaPTEot}');
      src: url('${FuturaPTEot}?#iefix') format('embedded-opentype'),
        url('${FuturaPTWoff2}') format('woff2'),
        url('${FuturaPTWoff}') format('woff'),
        url('${FuturaPTTtf}') format('truetype');
    }

    @font-face {
      font-family: 'FuturaPT';
      src: url('${FuturaPTHeavyEot}');
      src: url('${FuturaPTHeavyEot}?#iefix') format('embedded-opentype'),
        url('${FuturaPTHeavyWoff2}') format('woff2'),
        url('${FuturaPTHeavyWoff}') format('woff'),
        url('${FuturaPTHeavyTtf}') format('truetype');
      font-weight: 700;
    }

    @font-face {
      font-family: 'FuturaPT';
      src: url('${FuturaPTObliqueEot}');
      src: url('${FuturaPTObliqueEot}?#iefix') format('embedded-opentype'),
        url('${FuturaPTObliqueWoff2}') format('woff2'),
        url('${FuturaPTObliqueWoff}') format('woff'),
        url('${FuturaPTObliqueTtf}') format('truetype');
      font-style: italic;
    }

    @font-face {
      font-family: 'FuturaPT';
      src: url('${FuturaPTHeavyObliqueEot}');
      src: url('${FuturaPTHeavyObliqueEot}?#iefix') format('embedded-opentype'),
        url('${FuturaPTHeavyObliqueWoff2}') format('woff2'),
        url('${FuturaPTHeavyObliqueWoff}') format('woff'),
        url('${FuturaPTHeavyObliqueTtf}') format('truetype');
      font-style: italic;
      font-weight: 700;
    }

    /* For Atlas. */
    @font-face {
      font-family: 'OpenSans';
      font-style: normal;
      font-weight: normal;
      src: url('${OpenSansRegularTtf}') format('truetype');
    }

    @font-face {
      font-family: 'OpenSans';
      font-style: normal;
      font-weight: bold;
      src: url('${OpenSansBoldTtf}') format('truetype');
    }
  }
`;

Resets.displayName = 'PatchworkThemeReset';

export const PatchworkThemeProvider = ({
  theme,
  children,
}: {|
  theme: PatchworkTheme,
  children: Node,
|}) => (
  <ThemeProvider theme={theme}>
    <Resets face="sans">{children}</Resets>
  </ThemeProvider>
);
