NeoScan_Radiologist/app/shared/components/DicomViewerTest.tsx

/*
 * File: DicomViewerTest.tsx
 * Description: Test component for DICOM viewer with sample URLs
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React, { useState } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, ScrollView, Alert } from 'react-native';
import DicomViewer from './DicomViewer';

// Sample DICOM URLs for testing
const SAMPLE_DICOM_URLS = [
  {
    name: 'Sample DICOM 1',
    url: 'https://ohif-dicom-json-example.s3.amazonaws.com/LIDC-IDRI-0001/01-01-2000-30178/3000566.000000-03192/1-001.dcm'
  },
  {
    name: 'Sample DICOM 2',
    url: 'https://ohif-dicom-json-example.s3.amazonaws.com/LIDC-IDRI-0001/01-01-2000-30178/3000566.000000-03192/1-002.dcm'
  },
  {
    name: 'Sample DICOM 3',
    url: 'https://ohif-dicom-json-example.s3.amazonaws.com/LIDC-IDRI-0001/01-01-2000-30178/3000566.000000-03192/1-003.dcm'
  }
];

export default function DicomViewerTest(): React.ReactElement {
  const [dicomUrl, setDicomUrl] = useState(SAMPLE_DICOM_URLS[0].url);
  const [customUrl, setCustomUrl] = useState('');

  const handleUrlSelect = (url: string) => {
    setDicomUrl(url);
    setCustomUrl(url);
  };

  const handleCustomUrlSubmit = () => {
    if (customUrl.trim()) {
      setDicomUrl(customUrl.trim());
    } else {
      Alert.alert('Error', 'Please enter a valid URL');
    }
  };

  const handleViewerError = (error: string) => {
    console.error('DICOM Viewer Error:', error);
    Alert.alert('DICOM Viewer Error', error);
  };

  const handleViewerLoad = () => {
    console.log('DICOM Viewer loaded successfully');
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>DICOM Viewer Test</Text>
        <Text style={styles.subtitle}>Test different DICOM URLs</Text>
      </View>

      <ScrollView style={styles.urlSection}>
        <Text style={styles.sectionTitle}>Sample DICOM URLs:</Text>
        {SAMPLE_DICOM_URLS.map((sample, index) => (
          <TouchableOpacity
            key={index}
            style={[
              styles.urlButton,
              dicomUrl === sample.url && styles.selectedUrlButton
            ]}
            onPress={() => handleUrlSelect(sample.url)}
          >
            <Text style={[
              styles.urlButtonText,
              dicomUrl === sample.url && styles.selectedUrlButtonText
            ]}>
              {sample.name}
            </Text>
            <Text style={[
              styles.urlText,
              dicomUrl === sample.url && styles.selectedUrlText
            ]}>
              {sample.url}
            </Text>
          </TouchableOpacity>
        ))}

        <View style={styles.customUrlSection}>
          <Text style={styles.sectionTitle}>Custom DICOM URL:</Text>
          <View style={styles.inputContainer}>
            <TextInput
              style={styles.textInput}
              value={customUrl}
              onChangeText={setCustomUrl}
              placeholder="Enter DICOM URL..."
              placeholderTextColor="#999"
              autoCapitalize="none"
              autoCorrect={false}
            />
            <TouchableOpacity
              style={styles.submitButton}
              onPress={handleCustomUrlSubmit}
            >
              <Text style={styles.submitButtonText}>Load</Text>
            </TouchableOpacity>
          </View>
        </View>

        <View style={styles.currentUrlSection}>
          <Text style={styles.sectionTitle}>Current URL:</Text>
          <Text style={styles.currentUrl}>{dicomUrl}</Text>
        </View>
      </ScrollView>

      <View style={styles.viewerContainer}>
        <Text style={styles.viewerTitle}>DICOM Viewer:</Text>
        <DicomViewer
          dicomUrl={dicomUrl}
          onError={handleViewerError}
          onLoad={handleViewerLoad}
          debugMode={true}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  header: {
    backgroundColor: '#2196F3',
    padding: 20,
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#FFFFFF',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#E3F2FD',
  },
  urlSection: {
    flex: 1,
    padding: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#212121',
    marginBottom: 12,
    marginTop: 16,
  },
  urlButton: {
    backgroundColor: '#FFFFFF',
    padding: 16,
    borderRadius: 8,
    marginBottom: 8,
    borderWidth: 1,
    borderColor: '#E0E0E0',
  },
  selectedUrlButton: {
    backgroundColor: '#E3F2FD',
    borderColor: '#2196F3',
  },
  urlButtonText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#212121',
    marginBottom: 4,
  },
  selectedUrlButtonText: {
    color: '#1976D2',
  },
  urlText: {
    fontSize: 12,
    color: '#757575',
    fontFamily: 'monospace',
  },
  selectedUrlText: {
    color: '#1976D2',
  },
  customUrlSection: {
    marginTop: 16,
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  textInput: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    borderWidth: 1,
    borderColor: '#E0E0E0',
    borderRadius: 8,
    padding: 12,
    fontSize: 14,
    color: '#212121',
    marginRight: 8,
  },
  submitButton: {
    backgroundColor: '#4CAF50',
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
  },
  submitButtonText: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: '600',
  },
  currentUrlSection: {
    marginTop: 16,
    backgroundColor: '#FFFFFF',
    padding: 16,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#E0E0E0',
  },
  currentUrl: {
    fontSize: 12,
    color: '#757575',
    fontFamily: 'monospace',
    backgroundColor: '#F5F5F5',
    padding: 8,
    borderRadius: 4,
  },
  viewerContainer: {
    flex: 2,
    backgroundColor: '#000000',
    margin: 16,
    borderRadius: 8,
    overflow: 'hidden',
  },
  viewerTitle: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
    padding: 12,
    backgroundColor: '#333333',
  },
});

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