/* eslint-disable import/no-duplicates */
import React, { Fragment, useContext } from 'react';
import * as styledComponents from 'styled-components';
import { DefaultTheme } from 'styled-components';
import { GlobalStyles } from './GlobalStyles';
import { theme as defaultTheme } from './theme';

export interface ThemeInterface extends DefaultTheme {}

const {
  default: styled,
  css,
  createGlobalStyle,
  withTheme,
  keyframes,
  ThemeContext
} = styledComponents;

const ScThemeProvider = styledComponents.ThemeProvider;

// Custom <ThemeProvider> component allows us to define a default theme
const ThemeProvider = ({ theme = defaultTheme, children }: any) => {
  return (
    <ScThemeProvider theme={theme}>
      <Fragment>
        <GlobalStyles />
        {children}
      </Fragment>
    </ScThemeProvider>
  );
};

const useTheme = () => {
  return useContext(ThemeContext);
};

export {
  css,
  createGlobalStyle,
  keyframes,
  GlobalStyles,
  ThemeProvider,
  withTheme,
  useTheme,
  styled
};
