/**
 * @note this is the entry point for `storybook`
 * src/index.ts is the entry point for `webpack`
 */
import React, { StrictMode } from 'react'
import { setup } from '../src/bootstrapper/setup'
// turned off for faster storybook
// import { initScreenshot } from 'storybook-chrome-screenshot'
// import { checkA11y } from '@storybook/addon-a11y'
import { configure, setAddon, addDecorator } from '@storybook/react'
import { setOptions } from '@storybook/addon-options'
// import { withKnobs, text, boolean, number } from '@storybook/addon-knobs'
// import infoAddon from '@storybook/addon-info'
import { toStyledStory } from './StyledStory'
import './addons'

setup()

setOptions({
  name: 'ui-component-library',
  // goFullScreen: false,

  showDownPanel: false,
  showAddonPanel: false,

  // showSearchBox: false,
  // downPanelInRight: true,
  addonPanelInRight: true,

  sortStoriesByKind: true,

  showLeftPanel: true,
  showStoriesPanel: true,
})

// setAddon(infoAddon)
// Add the `withKnobs` decorator to add knobs support to your stories.
// You can also configure `withKnobs` as a global decorator.
// addDecorator(withKnobs)
// this one causes error "not a decorator"
// addDecorator(checkA11y())

// addDecorator(initScreenshot())
// @todo https://github.com/tsuyoshiwada/storybook-chrome-screenshot
// .addDecorator(withScreenshot({}))

addDecorator(toStyledStory)

function loadStories() {
  // require('../stories/App.story.tsx')
  // require('../stories/Home.story.tsx')
  // require('../stories/Text.story.tsx')
  // require('../stories/Playground.story.tsx')
  // require('../stories/Video.story.tsx')
  // require('../stories/Adspot.story.tsx')
  // require('../stories/BackToTop.story.tsx')
  // require('../stories/AccordianBlock.story.tsx')
  // require('../stories/Error.story.tsx')
  // require('../stories/BackgroundComponent.story.tsx')
  // require('../stories/SocialIconList.story.tsx')
  // require('../stories/AnimatedArrowIcon.story')
  // require('../stories/DetailedList.story')
  // require('../stories/Cell.story')
  // require('../stories/Image.story')
  // require('../stories/JsonLd.story')
  // require('../stories/Main.story')
  // require('../stories/Button.story')
  // require('../stories/Atoms.story.tsx')
  //require('../stories/Icons.story.tsx')

  function requireNonExamplesInContext(requireContext) {
    return requireContext
      .keys()
      .filter(key => !key.includes('examples'))
      .map(filename => requireContext(filename))
  }

  /**
   * @description !!! we can pick which ones we want
   *                  this way it will build less stories & be faster
   *
   * @note this is longhand because we need it to be statically analyzed quickly
   */
  const list = []
  // list.push(require.context('../stories', true, /story.tsx$/))
  // list.push(require.context('../stories/app', true, /story.tsx$/))
  list.push(require.context('../stories/forms', true, /story.tsx$/))
  list.push(require.context('../stories/atoms', true, /story.tsx$/))
  list.push(require.context('../stories/features', true, /story.tsx$/))
  list.push(require.context('../stories/organisms', true, /story.tsx$/))
  list.push(require.context('../stories/molecules', true, /story.tsx$/))
  list.push(require.context('../stories/presets', true, /story.tsx$/))
  list.push(require.context('../stories/templates', true, /story.tsx$/))
  list.push(require.context('../stories/abstractions', true, /story.tsx$/))
  list.push(require.context('../stories/themes', true, /story.tsx$/))

  // 1. each require context
  // 2. get all files in the context
  // 3. dynamically require them
  list.forEach(requireContext => requireContext.keys().map(requireContext))
}

configure(loadStories, module)