// @flow
import * as React from 'react';
import { inject, observer } from 'mobx-react';
import { ThemeProvider } from 'styled-components';
import { dark, light } from 'shared/styles/theme';
import GlobalStyles from 'shared/styles/globals';
import UiStore from 'stores/UiStore';

type Props = {
  ui: UiStore,
  children: React.Node,
};

function Theme({ children, ui }: Props) {
  return (
    <ThemeProvider theme={ui.theme === 'dark' ? dark : light}>
      <React.Fragment>
        <GlobalStyles />
        {children}
      </React.Fragment>
    </ThemeProvider>
  );
}

export default inject('ui')(observer(Theme));