import WordCountModal from '@/features/word-count-modal/components/word-count-modal'
import { ScopeDecorator } from './decorators/scope'
import useFetchMock from './hooks/use-fetch-mock'
import preview from '@ol-storybook/preview'

const meta = preview.meta({
  title: 'Editor / Modals / Word Count',
  component: WordCountModal,
  args: {
    show: true,
  },
  argTypes: {
    handleHide: {
      action: 'close modal',
    },
  },
  decorators: [Story => ScopeDecorator(Story)],
})

const counts = {
  headers: 4,
  mathDisplay: 40,
  mathInline: 400,
  textWords: 4000,
}

const messages = [
  'Lorem ipsum dolor sit amet.',
  'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
].join('\n')

export const WordCount = meta.story({
  decorators: [
    Story => {
      useFetchMock(fetchMock => {
        fetchMock.get(
          'express:/project/:projectId/wordcount',
          { status: 200, body: { texcount: counts } },
          { delay: 500 }
        )
      })

      return <Story />
    },
  ],
})

export const WordCountWithMessages = meta.story({
  decorators: [
    Story => {
      useFetchMock(fetchMock => {
        fetchMock.get(
          'express:/project/:projectId/wordcount',
          { status: 200, body: { texcount: { ...counts, messages } } },
          { delay: 500 }
        )
      })

      return <Story />
    },
  ],
})

export const ErrorResponse = meta.story({
  decorators: [
    Story => {
      useFetchMock(fetchMock => {
        fetchMock.get(
          'express:/project/:projectId/wordcount',
          { status: 500 },
          { delay: 500 }
        )
      })

      return <Story />
    },
  ],
})
