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

import { hasStickyColumnStyle } from '../../services/HelperServiceTyped'
import { DocsTemplate } from '../../../.storybook'
import { type HasStickyColumnStyleProps } from '../../services/HelperServiceTyped'

export const Example = (args: HasStickyColumnStyleProps): React.JSX.Element => {
  return <>{hasStickyColumnStyle(args)}</>
}
Example.storyName = 'hasStickyColumnStyle'
Example.args = {
  colIndex: 1,
  tableHeadersLength: 10,
  stickyLeftColumn: 1,
}

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

className={hasStickyColumnStyle({
  colIndex: 1,
  stickyLeftColumn: 1,
  stickyRightColumn: 0,
  tableHeadersLength: 10,
})}

Output: string of the classNames necessary to style the table cells.`}
            description='When dynamically adding sticky columns to a table, this function
                will return the necessary classNames to style the table cells.'
            infoBullets={[
              <span key='first-line'>
                The string that is printed for the className will correspond to
                predefined styles.
              </span>,
            ]}
          />
        </>
      ),
    },
  },
} as Meta<typeof Example>