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

import { compareArrays } from '../../services/FilterHelperServiceTyped'
import { DocsTemplate } from '../../../.storybook'

const CompareArraysDisplay = ({ first, second, label }) => {
  const result = compareArrays(first, second)

  return (
    <div>
      <h4>{label}</h4>
      <div>
        <strong>First Array:</strong> <pre>{JSON.stringify(first)}</pre>
      </div>
      <div>
        <strong>Second Array:</strong> <pre>{JSON.stringify(second)}</pre>
      </div>
      <div>
        <strong>Result:</strong> {result ? 'True ✓' : 'False ✗'}
      </div>
    </div>
  )
}

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

// Basic usage
const firstArray = [1, 2, 3]
const secondArray = [3, 2, 1]

const areEqual = compareArrays(firstArray, secondArray)
console.log(areEqual) // Output: true

// Arrays with different elements
const firstArray = [1, 2, 3]
const secondArray = [1, 2, 4]

const areEqual = compareArrays(firstArray, secondArray)
console.log(areEqual) // Output: false

// Handling null values
const result = compareArrays(null, [1, 2, 3])
console.log(result) // Output: false`}
            description='A utility function that determines if two arrays contain the same elements, regardless of their order. This function is useful for comparing array values in filter operations and detecting changes in array-based settings.'
            infoBullets={[
              <span key='core-functionality'>
                Core features:
                <ul>
                  <li>
                    Checks if two arrays contain exactly the same elements
                  </li>
                  <li>Order of elements does not matter for equality check</li>
                  <li>Safely handles null or undefined values</li>
                </ul>
              </span>,
              <span key='implementation'>
                Implementation details:
                <ul>
                  <li>
                    Uses <code>every()</code> and <code>includes()</code>{' '}
                    methods to check bidirectional inclusion
                  </li>
                  <li>
                    Validates that every element in the first array exists in
                    the second and vice versa
                  </li>
                </ul>
              </span>,
              <span key='use-cases'>
                Common use cases:
                <ul>
                  <li>Comparing filter selections</li>
                  <li>Detecting changes in multiselect inputs</li>
                  <li>Validating array equality in form submissions</li>
                  <li>
                    Checking if filter states have changed from initial values
                  </li>
                </ul>
              </span>,
              <span key='best-practices'>
                Best practices:
                <ul>
                  <li>
                    Use for content equality checks when order doesn't matter
                  </li>
                  <li>
                    Consider performance implications with very large arrays
                  </li>
                  <li>
                    Combine with other filter helpers for comprehensive state
                    management
                  </li>
                </ul>
              </span>,
            ]}
          />
        </>
      ),
      source: {
        code: false,
      },
    },
  },
  argTypes: {
    label: {
      control: 'text',
      description: 'Label for the comparison',
    },
    first: {
      control: 'object',
      description: 'First array to compare',
    },
    second: {
      control: 'object',
      description: 'Second array to compare',
    },
  },
} as Meta

type Story = StoryObj<typeof CompareArraysDisplay>

const Template: Story = {
  render: (args) => {
    return <CompareArraysDisplay {...args} />
  },
}

export const SameElementsDifferentOrder: Story = {
  ...Template,
  args: {
    label: 'Same Elements Different Order',
    first: [1, 2, 3, 4],
    second: [4, 3, 2, 1],
  },
}

export const DifferentElements: Story = {
  ...Template,
  args: {
    label: 'Different Elements',
    first: [1, 2, 3],
    second: [1, 2, 4],
  },
}

export const EmptyArrays: Story = {
  ...Template,
  args: {
    label: 'Empty Arrays',
    first: [],
    second: [],
  },
}

export const NullFirstArray: Story = {
  ...Template,
  args: {
    label: 'Null First Array',
    first: null,
    second: [1, 2, 3],
  },
}

export const StringArrays: Story = {
  ...Template,
  args: {
    label: 'String Arrays',
    first: ['apple', 'banana', 'cherry'],
    second: ['cherry', 'banana', 'apple'],
  },
}