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

import { lineAnimationDuration } from '../../services/GraphHelperServiceTyped'
import { DocsTemplate } from '../../../.storybook'

export const Example = (args: { length: number }): React.JSX.Element => {
  const { length } = args
  const result = lineAnimationDuration(length)

  return (
    <>
      <strong>Input Length:</strong> {length}
      <br />
      <strong>Animation Duration:</strong> {result}ms
    </>
  )
}

Example.storyName = 'lineAnimationDuration'
Example.args = {
  length: 10,
}

export default {
  title: 'Helper Functions/lineAnimationDuration',
  component: Example,
  argTypes: {
    length: {
      control: 'number',
      description: 'The number of data points to determine animation duration.',
    },
  },
  parameters: {
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
    docs: {
      page: () => (
        <>
          <DocsTemplate
            code={`import { lineAnimationDuration } from '@patterninc/react-ui'

// Get animation duration for a dataset of length 10
const duration = lineAnimationDuration(10);

Output: 700`}
            description='A utility function that determines the animation duration for a line graph based on number of data points.'
            infoBullets={[
              <span key='first-line'>
                <code>lineAnimationDuration</code> is used to calculate the
                animation duration based on dataset size.
              </span>,
              <span key='second-line'>
                The function takes one argument:
                <ul>
                  <li>
                    <code>length</code>: The number of data points in the graph.
                  </li>
                </ul>
              </span>,
              <span key='third-line'>
                Returns the animation duration in milliseconds:
                <ul>
                  <li>450 if the length is greater than 20.</li>
                  <li>
                    700 if the length is greater than 4 but less than or equal
                    to 20 units.
                  </li>
                </ul>
              </span>,
            ]}
          />
        </>
      ),
    },
  },
} as Meta<typeof Example>