import React, { useEffect } from 'react'
import { getStorybookUI, configure } from '@storybook/react-native'
import { initFonts } from '../app/theme/fonts'

declare let module

configure(() => {
  require('./storybook-registry')
}, module)

const StorybookUI = getStorybookUI({
  port: 9001,
  host: 'localhost',
  onDeviceUI: true,
  asyncStorage:
    require('@react-native-async-storage/async-storage').default || null,
})

export function StorybookUIRoot() {
  useEffect(() => {
    ;(async () => {
      await initFonts() // expo only
      if (typeof __TEST__ === 'undefined' || !__TEST__) {
        const Reactotron = require('../app/services/reactotron')
        const reactotron = new Reactotron.Reactotron()
        reactotron.setup()
      }
    })()
  }, [])

  return <StorybookUI />
}