import React, { useState, useEffect } from "react"
import { DevSettings } from "react-native"
import { loadString, saveString } from "../app/utils/storage"

/**
 * Toggle Storybook mode, in __DEV__ mode only.
 *
 * In non-__DEV__ mode, or when Storybook isn't toggled on,
 * renders its children.
 *
 * The mode flag is persisted in async storage, which means it
 * persists across reloads/restarts - this is handy when developing
 * new components in Storybook.
 */
export function ToggleStorybook(props) {
  const [showStorybook, setShowStorybook] = useState(false)
  const [StorybookUIRoot, setStorybookUIRoot] = useState(null)

  useEffect(() => {
    if (__DEV__ && DevSettings) {
      // Load the setting from storage if it's there
      loadString("devStorybook").then((storedSetting) => {
        // Set the initial value
        setShowStorybook(storedSetting === "on")

        // Add our toggle command to the menu
        DevSettings.addMenuItem("Toggle Storybook", () => {
          setShowStorybook((show) => {
            // On toggle, flip the current value
            show = !show

            // Write it back to storage
            saveString("devStorybook", show ? "on" : "off")

            // Return it to change the local state
            return show
          })
        })

        // Load the storybook UI once
        setStorybookUIRoot(() => require("./storybook").StorybookUIRoot)
      })
    }
  }, [])

  if (showStorybook) {
    return StorybookUIRoot ? <StorybookUIRoot /> : null
  } else {
    return props.children
  }
}