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

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

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

  const result = lineAnimationDelay(length)

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

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

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

// Get animation delay for a dataset of length 10
const delay = lineAnimationDelay(10); 

Output: 600`}
            description='A utility function that determines the animation delay for a line graph based on the number of data points.'
            infoBullets={[
              <span key='first-line'>
                <code>lineAnimationDelay</code> is used to calculate the delay
                for line graph animations based on the 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 delay in milliseconds:
                <ul>
                  <li>800 if the length is greater than 20.</li>
                  <li>
                    600 if the length is greater than 4 but less than or equal
                    to 20.
                  </li>
                </ul>
              </span>,
            ]}
          />
        </>
      ),
    },
  },
} as Meta<typeof Example>