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

import { replaceDelimiter } from '../../services/HelperServiceTyped'
import { DocsTemplate } from '../../../.storybook'

export const Example = (args: {
  /** The string that needs to be passed into this function. */
  text: string
  /** The string to join the split parts with. Defaults to space. */
  joinOption?: string
  /** The string or character to split by. Defaults to underscore. */
  splitSymbol?: string
  /** Option to prevent the use of `capitalize` (used in this function) and keep the casing of the string passed into `text`. */
  keepCasing?: boolean
}): React.JSX.Element => {
  const { text, joinOption, splitSymbol, keepCasing } = args
  return <>{replaceDelimiter({ text, joinOption, splitSymbol, keepCasing })}</>
}
Example.storyName = 'replaceDelimiter'
Example.args = {
  text: 'hello_world',
  joinOption: ' ',
  splitSymbol: '_',
  keepCasing: false,
}

export default {
  title: 'Helper Functions/replaceDelimiter',
  component: Example,
  parameters: {
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
    docs: {
      page: () => (
        <>
          <DocsTemplate
            code={`import { replaceDelimiter } from '@patterninc/react-ui'

replaceDelimiter({
  text: 'hello_world',
  joinOption: ' ',
  splitSymbol: '_',
  keepCasing: false
})

Output: 'Hello World'`}
            description='A function used to replace delimiters in a string with another character or string. This can be helpful when converting keys from snake_case to Title Case for display purposes.'
            infoBullets={[
              <span key='first-line'>
                <code>replaceDelimiter</code> accepts an object with parameters,
                making it easy to use with named arguments.
              </span>,
              <span key='second-line'>
                All parameters except <code>text</code> are optional with
                sensible defaults.
              </span>,
              <span key='third-line'>
                By default, <code>replaceDelimiter</code> capitalizes each word
                part when joining.
              </span>,
            ]}
          />
        </>
      ),
    },
  },
} as Meta<typeof Example>