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

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

export const Example = (args: {
  /** The data array to sort */
  data: object[]
  /** The property name to sort by */
  property: string
  /** If true, sorts in descending order. If false, sorts in ascending order. */
  isDescending?: boolean
}): React.JSX.Element => {
  const { data, property, isDescending } = args

  const sortedData = sortByProperty(
    [...data],
    property as keyof (typeof data)[0],
    isDescending,
  )

  return (
    <>
      <div>
        <h3>Sorted Data:</h3>
        <pre>{JSON.stringify(sortedData, null, 2)}</pre>
      </div>
    </>
  )
}

Example.storyName = 'sortByProperty'
Example.args = {
  data: [
    { id: 1, name: 'Alpha', value: 42, isActive: true },
    { id: 2, name: 'Beta', value: null, isActive: false },
    { id: 3, name: 'Gamma', value: 15, isActive: true },
    { id: 4, name: 'Delta', value: 78, isActive: false },
    { id: 5, name: 'Epsilon', value: 33, isActive: true },
  ],
  property: 'name',
  isDescending: false,
}

export default {
  title: 'Helper Functions/sortByProperty',
  component: Example,
  argTypes: {
    data: {
      control: 'object',
      description: 'Array of objects to sort',
    },
    property: {
      control: 'text',
      description: 'Property to sort by',
    },
    isDescending: {
      control: 'boolean',
      description: 'Sort in descending order',
    },
  },
  parameters: {
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
    docs: {
      page: () => (
        <>
          <DocsTemplate
            code={`import { sortByProperty } from '@patterninc/react-ui'

// Sort by name in ascending order
const nameAscending = sortByProperty(items, 'name', false);

// Sort by price in descending order
const priceHighToLow = sortByProperty(items, 'price', true);`}
            description='A utility function that sorts an array of objects by a specified property.'
            infoBullets={[
              <span key='first-line'>
                <code>sortByProperty</code> is used to sort arrays of objects by
                a specific property.
              </span>,
              <span key='second-line'>
                The function takes three arguments:
                <ul>
                  <li>The array of objects to sort</li>
                  <li>The property name to sort by</li>
                  <li>
                    A boolean flag: <code>true</code> for descending order,{' '}
                    <code>false</code> for ascending
                  </li>
                </ul>
              </span>,
              <span key='third-line'>
                <i>
                  Note: The function handles null values by pushing them to the
                  end of the sorted array.
                </i>
              </span>,
            ]}
          />
        </>
      ),
    },
  },
} as Meta<{
  data: object[]
  property: string
  isDescending: boolean
}>