// @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';

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 */

    @font-face {
      font-family: 'FuturaBT-Book';
      src: url(${require('../core/typography/fonts/FuturaBT-Book.eot')});
      src: url(${require('../core/typography/fonts/FuturaBT-Book.eot?#iefix')})
          format('embedded-opentype'),
        url(${require('../core/typography/fonts/FuturaBT-Book.woff2')})
          format('woff2'),
        url(${require('../core/typography/fonts/FuturaBT-Book.woff')})
          format('woff'),
        url(${require('../core/typography/fonts/FuturaBT-Book.ttf')})
          format('truetype');
    }

    @font-face {
      font-family: 'FuturaBT-Heavy';
      src: url(${require('../core/typography/fonts/FuturaBT-Heavy.eot')});
      src: url(${require('../core/typography/fonts/FuturaBT-Heavy.eot?#iefix')})
          format('embedded-opentype'),
        url(${require('../core/typography/fonts/FuturaBT-Heavy.woff2')})
          format('woff2'),
        url(${require('../core/typography/fonts/FuturaBT-Heavy.woff')})
          format('woff'),
        url(${require('../core/typography/fonts/FuturaBT-Heavy.ttf')})
          format('truetype');
    }

    @font-face {
      font-family: 'FuturaPT';
      src: url(${require('../core/typography/fonts/FuturaPT-Book.eot')});
      src: url(${require('../core/typography/fonts/FuturaPT-Book.eot?#iefix')})
          format('embedded-opentype'),
        url(${require('../core/typography/fonts/FuturaPT-Book.woff2')})
          format('woff2'),
        url(${require('../core/typography/fonts/FuturaPT-Book.woff')})
          format('woff'),
        url(${require('../core/typography/fonts/FuturaPT-Book.ttf')})
          format('truetype');
    }

    @font-face {
      font-family: 'FuturaPT';
      src: url(${require('../core/typography/fonts/FuturaPT-Heavy.eot')});
      src: url(${require('../core/typography/fonts/FuturaPT-Heavy.eot?#iefix')})
          format('embedded-opentype'),
        url(${require('../core/typography/fonts/FuturaPT-Heavy.woff2')})
          format('woff2'),
        url(${require('../core/typography/fonts/FuturaPT-Heavy.woff')})
          format('woff'),
        url(${require('../core/typography/fonts/FuturaPT-Heavy.ttf')})
          format('truetype');
      font-weight: 700;
    }

    @font-face {
      font-family: 'Akkurat-Regular';
      src: url(${require('../core/typography/fonts/Akkurat-Regular.eot')});
      src: url(${require('../core/typography/fonts/Akkurat-Regular.eot?#iefix')})
          format('embedded-opentype'),
        url(${require('../core/typography/fonts/Akkurat-Regular.woff2')})
          format('woff2'),
        url(${require('../core/typography/fonts/Akkurat-Regular.woff')})
          format('woff');
    }

    /* For Atlas. */
    @font-face {
      font-family: 'OpenSans';
      font-style: normal;
      font-weight: normal;
      src: url(${require('../core/typography/fonts/OpenSans-Regular.ttf')})
        format('truetype');
    }

    @font-face {
      font-family: 'OpenSans';
      font-style: normal;
      font-weight: bold;
      src: url(${require('../core/typography/fonts/OpenSans-Bold.ttf')})
        format('truetype');
    }
  }
`;

Resets.displayName = 'PatchworkThemeReset';

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