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

import { DocsTemplate } from '../../../.storybook'
import ToggleTable from './ToggleTable'
import { ToggleProviderContext } from '../ToggleProvider/ToggleProvider'
import {
  mockToggles,
  StandaloneToggleTableDemo,
  ToggleTableDemo,
} from './toggle-stories-helper'

const meta: Meta<typeof ToggleTable> = {
  title: '[Internal Components]/DevTools/ToggleTable',
  component: ToggleTable,
  parameters: {
    layout: 'padded',
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              <span role='img' aria-label='warning'>
                ⚠️
              </span>{' '}
              <strong>INTERNAL USE ONLY:</strong> The <code>ToggleTable</code>{' '}
              component is designed exclusively for internal library use within
              DevTools and is not exported via the module.ts file. This
              component should not be used directly outside of the component
              library.
              <br />
              <br />
              The <code>ToggleTable</code> component is a sophisticated table
              interface designed for managing feature toggles in development
              environments. It provides a comprehensive view of all feature
              toggles with advanced functionality for developers and
              administrators.
              <br />
              <br />
              This component is primarily used in DevTools to allow developers
              to view, group, and override feature toggle values locally during
              development and testing. It integrates seamlessly with the{' '}
              <code>ToggleProvider</code> context to display live toggle data
              while providing local override capabilities.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              <strong>Internal Use Only:</strong> This component is not part of
              the public API and should only be used within DevTools for
              development and debugging purposes.
            </span>,
            <span key='second-bullet'>
              <strong>Application Grouping:</strong> Toggles are automatically
              organized by application (Library, PXM, Predict, Shelf, Admin) for
              easy navigation.
            </span>,
            <span key='third-bullet'>
              <strong>Local Overrides:</strong> Developers can toggle switches
              to override CDN values locally using localStorage for testing
              purposes.
            </span>,
            <span key='fourth-bullet'>
              <strong>Visual Indicators:</strong> Rows are highlighted when
              local values differ from CDN values, making it easy to spot
              overrides.
            </span>,
            <span key='fifth-bullet'>
              <strong>Responsive Design:</strong> Table adapts to different
              screen sizes while maintaining functionality and readability.
            </span>,
            <span key='sixth-bullet'>
              <strong>Search Integration:</strong> Works with StandardTable
              search and filtering capabilities for quick toggle discovery.
            </span>,
            <span key='seventh-bullet'>
              <strong>Context Integration:</strong> Seamlessly consumes toggle
              data from ToggleProvider context when available.
            </span>,
          ]}
        />
      ),
    },
  },
  argTypes: {
    data: {
      description:
        'Array of toggle data with key, enabled, and application properties',
      control: 'object',
    },
    rerenderCallout: {
      description:
        'Callback function to trigger re-renders when toggle values change',
      action: 'rerender',
    },
  },
}

export default meta
type Story = StoryObj<typeof ToggleTable>

export const Default: Story = {
  render: () => (
    <StandaloneToggleTableDemo
      title='ToggleTable Component'
      showDescription={true}
    />
  ),
}

export const MinimalData: Story = {
  render: () => {
    const minimalData = [
      { key: 'feature-a', enabled: true, application: 'Library' },
      { key: 'feature-b', enabled: false, application: 'Library' },
      { key: 'feature-c', enabled: true, application: 'PXM' },
    ]
    return (
      <StandaloneToggleTableDemo
        customToggles={minimalData.map((item) => ({
          ...item,
          name: item.key
            .split('-')
            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
            .join(' '),
        }))}
        title='Minimal Toggle Data'
        showDescription={false}
      />
    )
  },
}

export const SingleApplication: Story = {
  render: () => {
    const libraryToggles = mockToggles.filter(
      (toggle) => toggle.application === 'Library',
    )
    return (
      <StandaloneToggleTableDemo
        customToggles={libraryToggles}
        title='Library Toggles Only'
        showDescription={false}
      />
    )
  },
}

export const EmptyState: Story = {
  render: () => (
    <ToggleProviderContext.Provider value={{ toggles: [] }}>
      <ToggleTableDemo title='Empty Toggle Table' showDescription={false} />
    </ToggleProviderContext.Provider>
  ),
}

export const LoadingState: Story = {
  render: () => (
    <ToggleProviderContext.Provider value={{ toggles: undefined }}>
      <ToggleTableDemo title='Loading Toggle Table' showDescription={false} />
    </ToggleProviderContext.Provider>
  ),
}