NeoScan_Radiologist/app/shared/components/DicomViewerModal.example.tsx

/*
 * File: DicomViewerModal.example.tsx
 * Description: Example usage of DicomViewerModal component
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { DicomViewerModal } from './index';
import { theme } from '../../theme/theme';

// ============================================================================
// EXAMPLE COMPONENT
// ============================================================================

/**
 * DicomViewerModalExample Component
 * 
 * Purpose: Demonstrates how to use the DicomViewerModal component
 * 
 * Features:
 * - Shows how to pass dicomUrl to modal
 * - Demonstrates modal state management
 * - Example with patient information
 * - Error handling examples
 */
export const DicomViewerModalExample: React.FC = () => {
  // ============================================================================
  // STATE MANAGEMENT
  // ============================================================================

  const [isModalVisible, setIsModalVisible] = useState(false);
  
  // Example DICOM URLs (replace with your actual URLs)
  const exampleDicomUrl = 'https://example-dicom-server.com/studies/123/series/456/instances/789';
  
  // Example patient data
  const patientData = {
    name: 'John Doe',
    studyDescription: 'CT Brain with Contrast',
  };

  // ============================================================================
  // EVENT HANDLERS
  // ============================================================================

  /**
   * Open DICOM viewer modal
   */
  const openDicomViewer = () => {
    setIsModalVisible(true);
  };

  /**
   * Close DICOM viewer modal
   */
  const closeDicomViewer = () => {
    setIsModalVisible(false);
  };

  // ============================================================================
  // RENDER
  // ============================================================================

  return (
    <View style={styles.container}>
      {/* Trigger Button */}
      <TouchableOpacity 
        style={styles.button} 
        onPress={openDicomViewer}
        activeOpacity={0.7}
      >
        <Text style={styles.buttonText}>View DICOM Image</Text>
      </TouchableOpacity>

      {/* DICOM Viewer Modal */}
      <DicomViewerModal
        visible={isModalVisible}
        dicomUrl={exampleDicomUrl}
        onClose={closeDicomViewer}
        title="CT Brain Scan"
        patientName={patientData.name}
        studyDescription={patientData.studyDescription}
      />
    </View>
  );
};

// ============================================================================
// STYLES
// ============================================================================

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: theme.colors.background,
    padding: theme.spacing.lg,
  },
  
  button: {
    backgroundColor: theme.colors.primary,
    paddingHorizontal: theme.spacing.xl,
    paddingVertical: theme.spacing.md,
    borderRadius: theme.borderRadius.medium,
    ...theme.shadows.primary,
  },
  
  buttonText: {
    fontSize: theme.typography.fontSize.bodyLarge,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.background,
  },
});

// ============================================================================
// USAGE EXAMPLES IN OTHER COMPONENTS
// ============================================================================

/*

// Example 1: Basic Usage in Patient Details Screen
import { DicomViewerModal } from '../../../shared/components';

const PatientDetailsExample = () => {
  const [showDicom, setShowDicom] = useState(false);
  const dicomUrl = patient.scanResults?.dicomUrl;

  return (
    <>
      <TouchableOpacity onPress={() => setShowDicom(true)}>
        <Text>View Scan Results</Text>
      </TouchableOpacity>

      <DicomViewerModal
        visible={showDicom}
        dicomUrl={dicomUrl}
        onClose={() => setShowDicom(false)}
        patientName={patient.name}
        studyDescription={patient.scanResults?.description}
      />
    </>
  );
};

// Example 2: Usage with Series Selection
import { DicomViewerModal } from '../../../shared/components';

const SeriesListExample = () => {
  const [selectedDicom, setSelectedDicom] = useState<string | null>(null);
  const [modalVisible, setModalVisible] = useState(false);

  const openDicom = (dicomUrl: string) => {
    setSelectedDicom(dicomUrl);
    setModalVisible(true);
  };

  const closeDicom = () => {
    setModalVisible(false);
    setSelectedDicom(null);
  };

  return (
    <>
      {seriesList.map((series) => (
        <TouchableOpacity 
          key={series.id} 
          onPress={() => openDicom(series.dicomUrl)}
        >
          <Text>{series.description}</Text>
        </TouchableOpacity>
      ))}

      <DicomViewerModal
        visible={modalVisible}
        dicomUrl={selectedDicom || ''}
        onClose={closeDicom}
        title="Series Viewer"
      />
    </>
  );
};

// Example 3: Usage with Error Handling
import { DicomViewerModal } from '../../../shared/components';

const ErrorHandlingExample = () => {
  const [dicomModalState, setDicomModalState] = useState({
    visible: false,
    url: '',
    title: '',
  });

  const openDicomWithValidation = (url: string, title: string) => {
    if (!url) {
      Alert.alert('Error', 'No DICOM URL available');
      return;
    }

    setDicomModalState({
      visible: true,
      url,
      title,
    });
  };

  const closeDicomModal = () => {
    setDicomModalState({
      visible: false,
      url: '',
      title: '',
    });
  };

  return (
    <>
      <TouchableOpacity 
        onPress={() => openDicomWithValidation(scan.url, scan.title)}
      >
        <Text>View Scan</Text>
      </TouchableOpacity>

      <DicomViewerModal
        visible={dicomModalState.visible}
        dicomUrl={dicomModalState.url}
        onClose={closeDicomModal}
        title={dicomModalState.title}
      />
    </>
  );
};

*/

/*
 * End of File: DicomViewerModal.example.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */