// @flow
import React, { Fragment, type Node } from 'react'
// eslint-disable-next-line import/no-extraneous-dependencies
import Gridzzly from 'gridzzly'
import { ThemeProvider } from 'emotion-theming'
import defaultTheme from './index'

type Props = {
  children: Node,
  theme?: {},
}

const griz = {
  autoHide: true,
  cycleKey: '~',
  persist: true,
  position: 'fixed',
  size: 32,
  toggleKey: '`',
  zIndex: 1100,
}

const Wrapper = ({ theme, children }: Props) => (
  <Fragment>
    <Gridzzly {...griz} />
    <ThemeProvider theme={theme || defaultTheme}>
      {children}
    </ThemeProvider>
  </Fragment>
)

Wrapper.defaultProps = {
  theme: null,
}

export default Wrapper