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

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

export const Example = (args: {
  /** Data that needs to be aggregated */
  data: Record<string, unknown>[]
  /** Name of property to aggregate */
  propName: string
}): React.JSX.Element => {
  const result = aggregateDataValues(args.data, args.propName)
  return <>Aggregated data: {result !== null ? result : 'null'}</>
}
Example.storyName = 'aggregateDataValues'
Example.args = {
  data: [{ num: 1 }, { num: 2 }, { num: 3 }],
  propName: 'num',
}

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

const data = [{num: 1}, {num: 2}, {num: 3}]

aggregateDataValues(data, 'num')

Output: 6`}
            description='A function used to aggregate datapoints from data properties.'
            infoBullets={[
              <span key='first-line'>
                <code>aggregateDataValues</code> is used to sum numeric values
                from a specific property across an array of objects.
              </span>,
              <span key='second-line'>
                Returns <code>null</code> if the input array is empty or
                undefined.
              </span>,
            ]}
          />
        </>
      ),
    },
  },
} as Meta<typeof Example>