Help System

/**
 * Main help system provider component
 * @param props - Help system configuration
 * @returns React element with help system
 */
function ProHelp<ValueType = any>(props: ProHelpProps<ValueType>): React.ReactElement;

interface ProHelpProps<ValueType> {
  /** Help data source array */
  dataSource: ProHelpDataSource<ValueType>[];
  
  /** Value type mapping for custom rendering */
  valueTypeMap?: Map<string, React.ComponentType<any>>;
  
  /** Child components */
  children?: React.ReactNode;
  
  /** Async content loader function */
  onLoadContext?: (dataSource: ProHelpDataSource) => Promise<any>;
}

interface ProHelpDataSource {
  /** Help item key */
  key?: string;
  
  /** Help item title */
  title: React.ReactNode;
  
  /** Help content */
  content?: React.ReactNode;
  
  /** Content type */
  valueType?: string;
  
  /** Child help items */
  children?: ProHelpDataSource[];
  
  /** Additional properties */
  [key: string]: any;
}

/**
 * Help content in modal format
 * @param props - Help modal configuration
 * @returns React element with help modal
 */
function ProHelpModal(props: ProHelpModalProps): React.ReactElement;

interface ProHelpModalProps {
  /** Modal visibility */
  open?: boolean;
  
  /** Modal close callback */
  onClose?: () => void;
  
  /** Help data source */
  dataSource?: ProHelpDataSource[];
  
  /** Modal title */
  title?: React.ReactNode;
  
  /** Modal width */
  width?: number;
  
  /** Modal props */
  modalProps?: any;
}

/**
 * Help content in drawer format
 * @param props - Help drawer configuration
 * @returns React element with help drawer
 */
function ProHelpDrawer(props: ProHelpDrawerProps): React.ReactElement;

interface ProHelpDrawerProps {
  /** Drawer visibility */
  open?: boolean;
  
  /** Drawer close callback */
  onClose?: () => void;
  
  /** Help data source */
  dataSource?: ProHelpDataSource[];
  
  /** Drawer title */
  title?: React.ReactNode;
  
  /** Drawer width */
  width?: number;
  
  /** Drawer placement */
  placement?: 'left' | 'right' | 'top' | 'bottom';
  
  /** Drawer props */
  drawerProps?: any;
}

/**
 * Help content in popover format
 * @param props - Help popover configuration
 * @returns React element with help popover
 */
function ProHelpPopover(props: ProHelpPopoverProps): React.ReactElement;

interface ProHelpPopoverProps {
  /** Popover visibility */
  open?: boolean;
  
  /** Popover visibility change callback */
  onOpenChange?: (open: boolean) => void;
  
  /** Help data source */
  dataSource?: ProHelpDataSource[];
  
  /** Popover title */
  title?: React.ReactNode;
  
  /** Trigger element */
  children?: React.ReactElement;
  
  /** Popover placement */
  placement?: 'top' | 'bottom' | 'left' | 'right';
  
  /** Popover props */
  popoverProps?: any;
}

/**
 * General help panel component
 * @param props - Help panel configuration
 * @returns React element with help panel
 */
function ProHelpPanel(props: ProHelpPanelProps): React.ReactElement;

interface ProHelpPanelProps {
  /** Help data source */
  dataSource?: ProHelpDataSource[];
  
  /** Panel title */
  title?: React.ReactNode;
  
  /** Panel header */
  header?: React.ReactNode;
  
  /** Panel footer */
  footer?: React.ReactNode;
  
  /** Custom render function */
  render?: (item: ProHelpDataSource) => React.ReactNode;
}

/**
 * Content panel for help documentation
 * @param props - Help content panel configuration
 * @returns React element with help content panel
 */
function ProHelpContentPanel(props: ProHelpContentPanelProps): React.ReactElement;

interface ProHelpContentPanelProps {
  /** Help data source */
  dataSource?: ProHelpDataSource[];
  
  /** Content style */
  contentStyle?: React.CSSProperties;
  
  /** Enable search functionality */
  searchable?: boolean;
  
  /** Custom content renderer */
  contentRender?: (item: ProHelpDataSource) => React.ReactNode;
}

/**
 * Generic content rendering panel
 * @param props - Render content panel configuration
 * @returns React element with rendered content panel
 */
function RenderContentPanel(props: RenderContentPanelProps): React.ReactElement;

interface RenderContentPanelProps {
  /** Data source */
  dataSource?: any[];
  
  /** Render function */
  render?: (item: any, index: number) => React.ReactNode;
  
  /** Panel props */
  panelProps?: any;
}

/**
 * Help context provider
 * @param props - Help provider configuration
 * @returns React element with help context
 */
function ProHelpProvide(props: ProHelpProvideProps): React.ReactElement;

interface ProHelpProvideProps {
  /** Help configuration */
  config?: ProHelpConfig;
  
  /** Child components */
  children?: React.ReactNode;
}

interface ProHelpConfig {
  /** Default help data source */
  dataSource?: ProHelpDataSource[];
  
  /** Global help settings */
  settings?: any;
  
  /** Help service configuration */
  service?: any;
}

/**
 * Help content selector
 * @param props - Help select configuration
 * @returns React element with help selector
 */
function ProHelpSelect(props: ProHelpSelectProps): React.ReactElement;

interface ProHelpSelectProps {
  /** Available help options */
  options?: ProHelpOption[];
  
  /** Selected help key */
  value?: string;
  
  /** Selection change callback */
  onChange?: (value: string) => void;
  
  /** Selector style */
  style?: React.CSSProperties;
}

interface ProHelpOption {
  /** Option key */
  key: string;
  
  /** Option label */
  label: React.ReactNode;
  
  /** Option value */
  value: string;
  
  /** Help data source */
  dataSource?: ProHelpDataSource[];
}

import React, { useState } from "react";
import {
  ProHelp,
  ProHelpModal,
  ProHelpDrawer,
  ProHelpPopover,
  ProHelpPanel,
  ProHelpProvide
} from "@ant-design/pro-layout";
import { Button, Space } from "antd";

// Basic help system
function BasicHelpSystem() {
  const helpData = [
    {
      key: 'getting-started',
      title: 'Getting Started',
      content: 'Welcome to our application! Here are the basics...',
      children: [
        {
          key: 'first-steps',
          title: 'First Steps',
          content: 'Follow these steps to get started...'
        },
        {
          key: 'navigation',
          title: 'Navigation',
          content: 'Learn how to navigate the interface...'
        }
      ]
    },
    {
      key: 'advanced-features',
      title: 'Advanced Features',
      content: 'Explore advanced functionality...',
    }
  ];

  return (
    <ProHelp dataSource={helpData}>
      <div>Your application content</div>
    </ProHelp>
  );
}

// Help modal example
function HelpModalExample() {
  const [modalOpen, setModalOpen] = useState(false);
  
  const helpData = [
    {
      title: 'User Management',
      content: (
        <div>
          <h3>Managing Users</h3>
          <p>Learn how to add, edit, and remove users from the system.</p>
          <ul>
            <li>Adding new users</li>
            <li>Editing user profiles</li>
            <li>Managing user permissions</li>
            <li>Deactivating users</li>
          </ul>
        </div>
      )
    },
    {
      title: 'Permissions',
      content: (
        <div>
          <h3>Permission System</h3>
          <p>Understand how the permission system works.</p>
        </div>
      )
    }
  ];

  return (
    <>
      <Button onClick={() => setModalOpen(true)}>
        Show Help
      </Button>
      
      <ProHelpModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        title="User Management Help"
        dataSource={helpData}
        width={800}
      />
    </>
  );
}

// Help drawer example
function HelpDrawerExample() {
  const [drawerOpen, setDrawerOpen] = useState(false);
  
  const helpData = [
    {
      title: 'Dashboard Overview',
      content: 'The dashboard provides an overview of your system metrics and key performance indicators.'
    },
    {
      title: 'Customizing Widgets',
      content: 'You can customize dashboard widgets by clicking the settings icon on each widget.'
    }
  ];

  return (
    <>
      <Button onClick={() => setDrawerOpen(true)}>
        Help Panel
      </Button>
      
      <ProHelpDrawer
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        title="Dashboard Help"
        dataSource={helpData}
        placement="right"
        width={400}
      />
    </>
  );
}

// Help popover example
function HelpPopoverExample() {
  const helpData = [
    {
      title: 'Quick Tip',
      content: 'Click this button to perform the primary action for this page.'
    }
  ];

  return (
    <ProHelpPopover
      dataSource={helpData}
      title="Button Help"
      placement="top"
    >
      <Button type="primary">
        Primary Action
      </Button>
    </ProHelpPopover>
  );
}

// Comprehensive help system with provider
function ComprehensiveHelpSystem() {
  const globalHelpConfig = {
    dataSource: [
      {
        key: 'general',
        title: 'General Help',
        content: 'General application help and guidance'
      }
    ],
    settings: {
      theme: 'light',
      searchEnabled: true,
    }
  };
  
  const [selectedHelp, setSelectedHelp] = useState('users');
  
  const helpOptions = [
    {
      key: 'users',
      label: 'User Management',
      value: 'users',
      dataSource: [
        { title: 'Adding Users', content: 'How to add new users...' },
        { title: 'User Roles', content: 'Understanding user roles...' }
      ]
    },
    {
      key: 'reports',
      label: 'Reports',
      value: 'reports',
      dataSource: [
        { title: 'Creating Reports', content: 'How to create reports...' },
        { title: 'Scheduling', content: 'Scheduling automated reports...' }
      ]
    }
  ];

  return (
    <ProHelpProvide config={globalHelpConfig}>
      <div style={{ padding: 24 }}>
        <h1>Application with Integrated Help</h1>
        
        <Space direction="vertical" size={16}>
          <ProHelpSelect
            options={helpOptions}
            value={selectedHelp}
            onChange={setSelectedHelp}
          />
          
          <ProHelpPanel
            dataSource={helpOptions.find(opt => opt.value === selectedHelp)?.dataSource}
            title={`${helpOptions.find(opt => opt.value === selectedHelp)?.label} Help`}
          />
        </Space>
      </div>
    </ProHelpProvide>
  );
}

// Async help content loading
function AsyncHelpExample() {
  const loadHelpContent = async (dataSource) => {
    // Simulate API call to load help content
    const response = await fetch(`/api/help/${dataSource.key}`);
    return await response.json();
  };

  const helpData = [
    {
      key: 'dynamic-help',
      title: 'Dynamic Help Content',
      content: null, // Will be loaded asynchronously
    }
  ];

  return (
    <ProHelp
      dataSource={helpData}
      onLoadContext={loadHelpContent}
    >
      <div>Content with dynamically loaded help</div>
    </ProHelp>
  );
}

// Help button that shows relevant help for current page
function ContextualHelpButton({ pageKey }: { pageKey: string }) {
  const [helpOpen, setHelpOpen] = useState(false);
  
  const helpData = useMemo(() => {
    // Load help data based on current page
    return getHelpForPage(pageKey);
  }, [pageKey]);
  
  return (
    <>
      <Button 
        icon={<QuestionCircleOutlined />}
        onClick={() => setHelpOpen(true)}
      >
        Help
      </Button>
      
      <ProHelpModal
        open={helpOpen}
        onClose={() => setHelpOpen(false)}
        dataSource={helpData}
        title={`Help - ${pageKey}`}
      />
    </>
  );
}

// Help system that reveals more detailed help progressively
function ProgressiveHelp() {
  const [level, setLevel] = useState<'basic' | 'intermediate' | 'advanced'>('basic');
  
  const helpData = useMemo(() => {
    const allHelp = {
      basic: [{ title: 'Basic Usage', content: 'Basic help content...' }],
      intermediate: [{ title: 'Advanced Features', content: 'Intermediate help...' }],
      advanced: [{ title: 'Expert Tips', content: 'Advanced help content...' }]
    };
    
    return Object.entries(allHelp)
      .filter(([key]) => {
        const levels = ['basic', 'intermediate', 'advanced'];
        return levels.indexOf(key) <= levels.indexOf(level);
      })
      .flatMap(([_, content]) => content);
  }, [level]);
  
  return (
    <ProHelpPanel
      dataSource={helpData}
      header={
        <Radio.Group value={level} onChange={(e) => setLevel(e.target.value)}>
          <Radio.Button value="basic">Basic</Radio.Button>
          <Radio.Button value="intermediate">Intermediate</Radio.Button>
          <Radio.Button value="advanced">Advanced</Radio.Button>
        </Radio.Group>
      }
    />
  );
}

// Help system with search functionality
function SearchableHelp() {
  const [searchTerm, setSearchTerm] = useState('');
  const [allHelpData] = useState([
    { title: 'User Management', content: 'Managing users in the system...', tags: ['users', 'admin'] },
    { title: 'Report Generation', content: 'Creating and scheduling reports...', tags: ['reports', 'data'] },
    { title: 'System Settings', content: 'Configuring system settings...', tags: ['settings', 'config'] }
  ]);
  
  const filteredHelp = useMemo(() => {
    if (!searchTerm) return allHelpData;
    
    return allHelpData.filter(item =>
      item.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.content.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.tags?.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
    );
  }, [searchTerm, allHelpData]);
  
  return (
    <ProHelpContentPanel
      dataSource={filteredHelp}
      searchable
      header={
        <Input.Search
          placeholder="Search help topics..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          style={{ marginBottom: 16 }}
        />
      }
    />
  );
}