import React from 'react';
import { Tab, InteractiveCodePanel } from '../../../interactive-code-panel';

export const NotificationsReactGuide: React.FC = () => {
  const tabs: Tab[] = [
    {
      id: 'verify-setup',
      title: '1. Verify Setup',
      icon: '✅',
      language: 'bash',
      content: ``,
      description: `Ensure your Unisphere workspace is properly set up before integrating notifications.`
    },
    {
      id: 'install-runtime',
      title: '2. Install Runtime',
      icon: '📦',
      language: 'bash',
      content: `npm install @unisphere/runtime-react`,
      description: `Install the React-optimized Unisphere runtime package for host applications.`
    },
    {
      id: 'configure-provider',
      title: '3. Configure Provider',
      icon: '⚙️',
      language: 'tsx',
      content: `import React from 'react';
import { UnisphereProvider } from '@unisphere/runtime-react';

function HostAppComponent() {
  const unisphereConfiguration = React.useMemo(() => ({
    serverUrl: process.env.REACT_APP_UNISPHERE_SERVER_URL,
    runtimes: [{
      widgetName: 'unisphere.widget.notifications',
      runtimeName: 'notifications',
      settings: {},
      runtimeArea: { target: 'body' }
    }]
  }), []);

  return (
    <UnisphereProvider initialConfiguration={unisphereConfiguration}>
      <MyApplication />
    </UnisphereProvider>
  );
}

export default HostAppComponent;`,
      description: `Configure the UnisphereProvider with notifications runtime. Replace serverUrl with your actual Unisphere server URL.`
    },
    {
      id: 'install-notifications',
      title: '4. Install Notifications',
      icon: '🔔',
      language: 'bash',
      content: `npm install @unisphere/notifications-runtime-react @unisphere/notifications-core`,
      description: `Install the React notifications runtime and core packages.`
    },
    {
      id: 'setup-notifications-provider',
      title: '5. Setup Provider',
      icon: '🔧',
      language: 'tsx',
      content: `import React from 'react';
import { UnisphereProvider } from '@unisphere/runtime-react';
import { UnisphereNotificationsProvider } from '@unisphere/notifications-runtime-react';

function App() {
  const unisphereConfiguration = React.useMemo(() => ({
    serverUrl: process.env.REACT_APP_UNISPHERE_SERVER_URL,
    runtimes: [{
      widgetName: 'unisphere.widget.notifications',
      runtimeName: 'notifications',
      settings: {},
      runtimeArea: { target: 'body' }
    }]
  }), []);

  return (
    <UnisphereProvider initialConfiguration={unisphereConfiguration}>
      <UnisphereNotificationsProvider>
        <MyApplication />
      </UnisphereNotificationsProvider>
    </UnisphereProvider>
  );
}

export default App;`,
      description: `Wrap your app with both UnisphereProvider and UnisphereNotificationsProvider for complete setup.`
    },
    {
      id: 'show-notifications',
      title: '6. Show Notifications',
      icon: '✨',
      language: 'tsx',
      content: `import React, { useContext } from 'react';
import { UnisphereNotificationsContext, NotificationTypes } from '@unisphere/notifications-runtime-react';

function MyComponent() {
  const { addNotification } = useContext(UnisphereNotificationsContext);

  const showNotification = () => {
    addNotification({
      type: NotificationTypes.Toast,
      content: { message: "Hello everyone!" },
      author: {
        name: "Brian Dennis",
        position: "Director of Brand, Kaltura",
        url: "https://avatar.com",
      },
      buttons: [{ 
        id: 'btn-1', 
        type: 'link', 
        label: 'Read Post', 
        url: 'www.example.com' 
      }]
    });
  };

  return (
    <button onClick={showNotification}>
      Show Notification
    </button>
  );
}`,
      description: `Use the notifications context to display toast notifications with author information and action buttons.`
    },
    {
      id: 'custom-hook',
      title: '7. Custom Hook',
      icon: '🎣',
      language: 'tsx',
      content: `import { useContext, useCallback } from 'react';
import { UnisphereNotificationsContext, NotificationTypes } from '@unisphere/notifications-runtime-react';

// Custom hook for common notification patterns
export const useNotifications = () => {
  const { addNotification } = useContext(UnisphereNotificationsContext);

  const showSuccess = useCallback((message: string, options?: any) => {
    addNotification({
      type: NotificationTypes.Toast,
      content: { message, title: "Success" },
      author: { name: "System", position: "Success Handler" },
      duration: 3000,
      priority: 'normal',
      ...options
    });
  }, [addNotification]);

  const showError = useCallback((message: string, options?: any) => {
    addNotification({
      type: NotificationTypes.Toast,
      content: { message, title: "Error" },
      author: { name: "System", position: "Error Handler" },
      persistent: true,
      priority: 'urgent',
      ...options
    });
  }, [addNotification]);

  return { showSuccess, showError, addNotification };
};

// Usage in component
function MyComponent() {
  const { showSuccess, showError } = useNotifications();

  const handleSave = async () => {
    try {
      await saveData();
      showSuccess("Data saved successfully!");
    } catch (error) {
      showError("Failed to save data. Please try again.");
    }
  };

  return <button onClick={handleSave}>Save Data</button>;
}`,
      description: `Create reusable custom hooks for common notification patterns with success, error, and info helpers.`
    }
  ];

  return (
    <>
      <style>{`
        @media (max-width: 768px) {
          .tab-navigation {
            flex-direction: column !important;
          }
          .tab-navigation button {
            flex: none !important;
            border-bottom: 1px solid var(--ifm-color-emphasis-300) !important;
            border-right: none !important;
          }
          .tab-navigation button:last-child {
            border-bottom: none !important;
          }
        }
      `}</style>
      <InteractiveCodePanel
        title="Integrate Notifications Experience - React"
        description="Complete guide for integrating Unisphere notifications into your React application"
        tabs={tabs}
        defaultTab="verify-setup"
        defaultExpanded={false}
        showCopyButton={true}
      />
    </>
  );
};
