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

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

export const Example = (args: {
  obj: Record<string, any>
  colorSet?: string[]
}): React.JSX.Element => {
  const { obj, colorSet } = args

  const result = createDataKeyLegend(obj, colorSet)

  return (
    <>
      <pre>{JSON.stringify(result, null, 2)}</pre>
    </>
  )
}

Example.storyName = 'createDataKeyLegend'
Example.args = {
  obj: {
    revenue: 10000,
    visitors: 500,
    conversions: 50,
    tooltip: 'Sample Tooltip',
    date: 1681017600000,
  },
  colorSet: ['var(--red)', 'var(--blue)', 'var(--green)'],
}

export default {
  title: 'Helper Functions/createDataKeyLegend',
  component: Example,
  argTypes: {
    obj: {
      control: 'object',
      description: 'The object containing data keys to generate the legend.',
    },
    colorSet: {
      control: 'object',
      description: 'Optional array of colors to use for the legend.',
    },
  },
  parameters: {
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
    docs: {
      page: () => (
        <>
          <DocsTemplate
            code={`import { createDataKeyLegend } from '@patterninc/react-ui'

// Generate a legend for data keys with a custom color set
const legend = createDataKeyLegend(dataObject, ['var(--red)', 'var(--blue)', 'var(--green)']);

// Generate a legend using the default color palette
const defaultLegend = createDataKeyLegend(dataObject);`}
            description='A utility function that generates a legend for data keys, mapping each key to a color.'
            infoBullets={[
              <span key='first-line'>
                <code>createDataKeyLegend</code> is used to create a legend for
                visualizations, mapping data keys to colors.
              </span>,
              <span key='second-line'>
                The function takes two arguments:
                <ul>
                  <li>An object containing data keys.</li>
                  <li>
                    An optional array of colors to use for the legend. If not
                    provided, a default color palette is used.
                  </li>
                </ul>
              </span>,
              <span key='third-line'>
                Returns an array of objects, each containing:
                <ul>
                  <li>
                    <code>key</code>: The data key name.
                  </li>
                  <li>
                    <code>stroke</code>: The corresponding color.
                  </li>
                </ul>
              </span>,
              <span key='fourth-line'>
                <i>
                  Note: The function removes the <code>tooltip</code> and{' '}
                  <code>date</code> properties from the input object before
                  generating the legend.
                </i>
              </span>,
            ]}
          />
        </>
      ),
    },
  },
} as Meta<typeof Example>