import { useEffect } from 'react'
import useCustomEffect from 'custom-effect'

import { wrapEffect } from 'use-side-effect'

interface Props0 {
  prop0?: string
  prop1?: string
}

interface Props1 {
  prop0: string
  prop1?: string // has default value
}

const GlobalEffect0 = wrapEffect<Props0>({
  hook: useEffect,
  mapPropsToHook: ({ prop0 = 'default value', prop1 = 'default value' }) => () => {
    // ...implement here
  },
})

const GlobalEffect1 = wrapEffect<Props1>({
  hook: useCustomEffect,
})

GlobalEffect1.defaultProps = {
  // ...
}

const App: React.SFC = () => (
  <Parent>
    <GlobalEffect0 />
    <Child>
      <GlobalEffect0 prop1='override value'/>
      <GlobalEffect1 prop0='b'/>
    </Child>
  </Parent>
)

useEffect(() => {
  // ...implementation here
}, [/* prop0 */ 'default value', /* prop1 */ 'override value'])

useCustomEffect(prop0, prop1)