import addons, { makeDecorator } from '@storybook/addons'
import { STORY_CHANGED } from '@storybook/core-events'

export const withStore = makeDecorator({
  name: 'withStore',
  parameterName: 'store',
  skipIfNoParametersOrOptions: false,
  wrapper: (getStory, context, { parameters = {} }) => {
    const { modules = {} } = parameters
    return {
      created() {
        for (name in modules) {
          this.$store.registerModule(name, modules[name])
        }
        const channel = addons.getChannel()
        channel.on(STORY_CHANGED, () => {
          for (name in modules) {
            this.$store.unregisterModule(name)
          }
        })
      },
      template: '<story></story>',
    }
  },
})

// preview.js
import { addDecorator } from '@storybook/vue'
import { withStore } from './addons/store'

addDecorator(withStore)

// Inside story
export const FrenchFooter = () => ({
  components: { Footer },
  template: '<Footer />',
})
FrenchFooter.story = {
  parameters: {
    store: {
      modules: {
        footer: footerStoreMock({ lang: 'fra-fr' }),
      },
    },
  },
}

import { IconButton } from '@storybook/components'
import { styled } from '@storybook/theming'
import { useChannel, useAddonState } from '@storybook/api'

const ButtonLabel = styled.div(({ theme }) => ({
  fontSize: theme.typography.size.s2 - 1,
}))

export const TextDirectionTool = () => {
  const [state, setState] = useAddonState(`${ADDON_ID}-text-direction`, 'ltr')
  const emit = useChannel()

  function toggleTextDirection() {
    const newState = state === 'ltr' ? 'rtl' : 'ltr'
    setState(newState)
    emit(TEXT_DIRECTION_CHANGED, newState)
  }

  return (
    <IconButton onClick={toggleTextDirection}>
      <ButtonLabel>{state.toUpperCase()}</ButtonLabel>
    </IconButton>
  )
}

// register.js

addons.register(`${ADDON_ID}`, api => {
  addons.add(`${ADDON_ID}-text-direction`, {
    title: 'text-direction switch',
    type: types.TOOL,
    match: ({ viewMode }) => viewMode === 'story',
    render: () => <TextDirectionTool />,
  })
})

// preview.js

const channel = addons.getChannel()
channel.on(TEXT_DIRECTION_CHANGED, direction => {
  store.commit('setLocaleContext', { direction })
  document.dir = direction
})