import React from 'react'
import { type Meta, type StoryObj } from '@storybook/react-vite'

import TranslationTools from './TranslationTools'
import { DocsTemplate } from '../../../.storybook'
import { LANGUAGES_TO_CHECK, RESOURCES } from '../../translations/Resources'

const meta: Meta<typeof TranslationTools> = {
  title: 'Translations/TranslationTools',
  component: TranslationTools,
  parameters: {
    layout: 'fullscreen',
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>TranslationTools</code> component helps manage and
              display missing translations in multilingual applications. It
              provides tools for identifying missing translations, exporting
              data, and generating AI prompts for translation.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Use <code>TranslationTools</code> to streamline translation
              workflows and ensure all languages are properly localized.
            </span>,
            <span key='second-bullet'>
              Includes features like CSV export, AI prompt generation, and
              clipboard copy for missing translations.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta
type Story = StoryObj<typeof TranslationTools>

const Template: Story = {
  render: (args) => {
    return <TranslationTools {...args}></TranslationTools>
  },
}

export const LibraryTranslations: Story = {
  ...Template,
  args: {
    resources: RESOURCES,
    languagesToCheck: LANGUAGES_TO_CHECK as (
      | 'es'
      | 'en'
      | 'fr'
      | 'pl'
      | 'zh'
    )[],
    hideReturnToAppButton: true,
  },
}