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

import { DocsTemplate } from '../../../.storybook'
import ToggleProvider, { ToggleProviderContext } from './ToggleProvider'
import {
  MockToggleProvider,
  ToggleTableDemo,
} from '../DevTools/toggle-stories-helper'

const meta: Meta<typeof ToggleProvider> = {
  title: 'Providers/ToggleProvider',
  component: ToggleProvider,
  parameters: {
    layout: 'padded',
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>ToggleProvider</code> component is a React context
              provider that fetches and manages feature toggles from a CDN
              endpoint. It provides toggle data to child components through
              React context, enabling feature flag functionality throughout the
              application.
              <br />
              <br />
              This component handles the entire lifecycle of toggle management
              including loading states, error handling, and cleanup. It
              automatically fetches toggles based on the provided distribution
              key and environment.
              <br />
              <br />
              The demo below shows the <code>ToggleTable</code> component from
              DevTools, which demonstrates real-world usage of toggles with
              grouping, local storage overrides, and toggle switching
              functionality.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Use the <code>ToggleProvider</code> to wrap your application or
              specific sections that need access to feature toggles.
            </span>,
            <span key='second-bullet'>
              Child components can access toggle data using the{' '}
              <code>ToggleProviderContext</code>
              with React's <code>useContext</code> hook.
            </span>,
            <span key='third-bullet'>
              The provider automatically handles loading states and provides
              callbacks for error handling and completion notifications.
            </span>,
            <span key='fourth-bullet'>
              Supports different environments (development, staging, production)
              and uses the appropriate CDN endpoint for each.
            </span>,
            <span key='fifth-bullet'>
              Includes automatic cleanup and request cancellation to prevent
              memory leaks and race conditions.
            </span>,
            <span key='sixth-bullet'>
              The <code>ToggleTable</code> demo shows advanced features like
              grouping by application, local storage overrides, and visual
              indicators for toggle differences.
            </span>,
          ]}
        />
      ),
    },
  },
  argTypes: {
    children: {
      description:
        'Child components that will have access to the toggle context',
      control: false,
    },
    distributionKey: {
      description: 'Distribution key used to identify which toggles to fetch',
      control: 'text',
    },
    environment: {
      description: 'Environment to fetch toggles for',
      control: 'select',
      options: ['development', 'staging', 'production'],
    },
    errorCallback: {
      description: 'Optional callback for error handling',
      action: 'error',
    },
    finishedLoadingCallback: {
      description: 'Optional callback when loading finishes',
      action: 'finished loading',
    },
  },
}

export default meta
type Story = StoryObj<typeof ToggleProvider>

export const Default: Story = {
  render: (args) => (
    <MockToggleProvider {...args}>
      <ToggleTableDemo />
    </MockToggleProvider>
  ),
  args: {
    distributionKey: 'example-app',
    environment: 'development',
  },
}

export const EmptyToggles: Story = {
  render: () => (
    <ToggleProviderContext.Provider value={{ toggles: [] }}>
      <ToggleTableDemo />
    </ToggleProviderContext.Provider>
  ),
  args: {
    distributionKey: 'empty-app',
    environment: 'development',
  },
}