react-native-elearn-ui 0.1.8 → 0.1.9

package/src/screens/PearlsScreen.tsx

@@ -0,0 +1,720 @@
+import React, { useState } from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+  StatusBar,
+  Modal,
+  Dimensions,
+} from 'react-native';
+import { useElearnConfig } from '../context/ElearnConfigContext';
+import { useTheme } from '../context/ThemeContext';
+import { Typography, Card, Icon } from '../components';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+interface PearlsScreenProps {
+  onBack?: () => void;
+  hideHeader?: boolean;
+}
+
+// Mock Chapter detail shape
+interface PearlChapter {
+  id: string;
+  number: number;
+  title: string;
+  isFree?: boolean;
+  isLocked?: boolean;
+  bullets: string[];
+}
+
+interface PearlTopic {
+  id: string;
+  title: string;
+  sections: {
+    [sectionName: string]: PearlChapter[];
+  };
+}
+
+// Mock database matching user images
+const MOCK_PEARLS_TOPICS: PearlTopic[] = [
+  {
+    id: 'topic_head_neck',
+    title: 'Head and neck',
+    sections: {
+      'Head and Neck': [
+        {
+          id: 'hn_c1',
+          number: 1,
+          title: 'Classify sino-nasal neoplasam. Discuss the newer entities',
+          isFree: true,
+          bullets: [
+            'Benign Neoplasms: Benign sino-nasal tumors are generally slow-growing and less likely to invade surrounding structures. Common benign types include inverted papilloma, oncocytic Schneiderian papilloma, and fungiform papilloma, all of which originate from the Schneiderian mucosa. Inverted papilloma is notable for its local aggressiveness and high recurrence rate, sometimes exhibiting malignant transformation into squamous cell carcinoma.',
+            'Malignant Neoplasms: Malignant tumors of the sino-nasal tract are rare but clinically significant due to their aggressive behavior, late presentation, and complex anatomical constraints that limit surgical access. The most common malignant tumor is squamous cell carcinoma, often arising from dysplastic or papillomatous lesions.',
+            'Esthesioneuroblastoma: A notable entity originating from the olfactory epithelium and displaying variable degrees of malignancy. Additionally, melanoma, lymphoma, and undifferentiated carcinoma can also occur in the sino-nasal region, often presenting with nasal obstruction, epistaxis, and facial pain.'
+          ]
+        },
+        {
+          id: 'hn_c2',
+          number: 2,
+          title: 'Histologic variants of ameloblastoma',
+          isLocked: true,
+          bullets: [
+            'Ameloblastoma is a benign but locally aggressive odontogenic neoplasm.',
+            'Follicular and plexiform are the most common histologic patterns.',
+            'Unicystic variants have a better prognosis and lower recurrence rates.'
+          ]
+        },
+        {
+          id: 'hn_c3',
+          number: 3,
+          title: 'Role of brush ctology in diagnosis of oral cancerous and precancerous lessions',
+          isLocked: true,
+          bullets: [
+            'Oral brush cytology is a non-invasive screening aid.',
+            'High sensitivity for identifying cellular dysplasias.',
+            'Must be followed by scalpel biopsy for definitive diagnosis.'
+          ]
+        }
+      ],
+      'Eye': [
+        {
+          id: 'eye_c1',
+          number: 1,
+          title: 'Classify sino-nasal neoplasam. Discuss the newer entities',
+          isLocked: true,
+          bullets: []
+        },
+        {
+          id: 'eye_c2',
+          number: 2,
+          title: 'Histologic variants of ameloblastoma',
+          isLocked: true,
+          bullets: []
+        }
+      ]
+    }
+  },
+  { id: 'topic_brain_spine', title: 'Brain, Spine and Meninges', sections: {} },
+  { id: 'topic_breast', title: 'Breast Pathology', sections: {} },
+  { id: 'topic_skin', title: 'Skin and Connective Tissue', sections: {} },
+  { id: 'topic_kidney', title: 'Kidney & Urinary Tract', sections: {} },
+  { id: 'topic_gastro', title: 'Gastro-Intestinal System', sections: {} },
+  { id: 'topic_endocrine', title: 'Endocrine Pathology', sections: {} },
+  { id: 'topic_general', title: 'General Pathology', sections: {} },
+  { id: 'topic_male_genital', title: 'Male Genital System', sections: {} },
+  { id: 'topic_thoracic', title: 'Thoracic Pathology', sections: {} }
+];
+
+export const PearlsScreen: React.FC<PearlsScreenProps> = ({
+  onBack,
+  hideHeader = false,
+}) => {
+  const { callbacks } = useElearnConfig();
+  const theme = useTheme();
+
+  // Navigation State
+  const [currentView, setCurrentView] = useState<'topics' | 'chapters' | 'reader'>('topics');
+  const [selectedTopic, setSelectedTopic] = useState<PearlTopic | null>(null);
+  
+  // Flatten all chapters of a topic to easily paginate inside the reader view
+  const [flattenedChapters, setFlattenedChapters] = useState<PearlChapter[]>([]);
+  const [activeChapterIndex, setActiveChapterIndex] = useState<number>(0);
+  
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [bottomSheetVisible, setBottomSheetVisible] = useState(false);
+
+  const handleBackPress = () => {
+    if (currentView === 'reader') {
+      setCurrentView('chapters');
+    } else if (currentView === 'chapters') {
+      setCurrentView('topics');
+    } else {
+      if (onBack) {
+        onBack();
+      } else {
+        callbacks.onBackToDashboard?.();
+      }
+    }
+  };
+
+  const handleSelectTopic = (topic: typeof MOCK_PEARLS_TOPICS[0]) => {
+    setSelectedTopic(topic);
+    
+    // Flatten chapters for reader mode navigation
+    const flat: PearlChapter[] = [];
+    Object.keys(topic.sections || {}).forEach((sectionName) => {
+      const sectionChapters = topic.sections[sectionName] || [];
+      flat.push(...sectionChapters);
+    });
+    setFlattenedChapters(flat);
+
+    setCurrentView('chapters');
+  };
+
+  const handleSelectChapter = (chapter: PearlChapter) => {
+    if (chapter.isLocked) return;
+
+    const index = flattenedChapters.findIndex((c) => c.id === chapter.id);
+    if (index !== -1) {
+      setActiveChapterIndex(index);
+      setIsCompleted(false);
+      setCurrentView('reader');
+    }
+  };
+
+  const handlePrevChapter = () => {
+    if (activeChapterIndex > 0) {
+      setActiveChapterIndex(activeChapterIndex - 1);
+      setIsCompleted(false);
+    }
+  };
+
+  const handleNextChapter = () => {
+    if (activeChapterIndex < flattenedChapters.length - 1) {
+      setActiveChapterIndex(activeChapterIndex + 1);
+      setIsCompleted(false);
+    }
+  };
+
+  // --- View Renderers ---
+
+  // 1. Topic index list view (Screenshot 1)
+  const renderTopicsView = () => {
+    return (
+      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        <Typography variant="h2" bold color={theme.textPrimary} style={styles.sectionHeaderTitle}>
+          All Topics
+        </Typography>
+
+        <View style={styles.listContainer}>
+          {MOCK_PEARLS_TOPICS.map((topic) => (
+            <TouchableOpacity
+              key={topic.id}
+              activeOpacity={0.8}
+              onPress={() => handleSelectTopic(topic)}
+            >
+              <Card bordered style={styles.topicCard}>
+                <View style={styles.topicRow}>
+                  {/* Left Circle Icon */}
+                  <View style={[styles.iconCircle, { backgroundColor: 'rgba(59, 130, 246, 0.08)' }]}>
+                    <Icon name="file-text" size={16} color="#3B82F6" />
+                  </View>
+                  {/* Right label */}
+                  <Typography variant="body" bold color={theme.textPrimary} style={styles.topicLabelText}>
+                    {topic.title}
+                  </Typography>
+                </View>
+              </Card>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </ScrollView>
+    );
+  };
+
+  // 2. Chapters list grouped by sections (Screenshot 2)
+  const renderChaptersView = () => {
+    if (!selectedTopic) return null;
+    const sections = Object.keys(selectedTopic.sections || {});
+
+    return (
+      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        {sections.map((sectionName) => {
+          const list = selectedTopic.sections[sectionName] || [];
+          return (
+            <View key={sectionName} style={styles.sectionBlock}>
+              <Typography variant="h2" bold color={theme.textPrimary} style={styles.sectionHeading}>
+                {sectionName}
+              </Typography>
+
+              <View style={styles.chaptersList}>
+                {list.map((chapter) => (
+                  <TouchableOpacity
+                    key={chapter.id}
+                    activeOpacity={0.8}
+                    onPress={() => handleSelectChapter(chapter)}
+                    disabled={chapter.isLocked}
+                  >
+                    <Card bordered style={styles.chapterCard}>
+                      <View style={styles.chapterRow}>
+                        {/* Left sequential index */}
+                        <Typography variant="body" bold color={theme.textSecondary} style={styles.chapterNumber}>
+                          {chapter.number}
+                        </Typography>
+
+                        {/* Middle Text */}
+                        <Typography variant="body" color={theme.textPrimary} style={styles.chapterTitle}>
+                          {chapter.title}
+                        </Typography>
+
+                        {/* Right locks/free badges */}
+                        <View style={styles.chapterBadgeCol}>
+                          {chapter.isFree ? (
+                            <View style={[styles.freeBadge, { borderColor: theme.primary }]}>
+                              <Typography variant="caption" bold color={theme.primary} style={styles.freeText}>
+                                FREE
+                              </Typography>
+                            </View>
+                          ) : chapter.isLocked ? (
+                            <View style={styles.lockCircle}>
+                              <Icon name="lock" size={12} color={theme.textSecondary} />
+                            </View>
+                          ) : null}
+                        </View>
+                      </View>
+                    </Card>
+                  </TouchableOpacity>
+                ))}
+              </View>
+            </View>
+          );
+        })}
+      </ScrollView>
+    );
+  };
+
+  // 3. Reader view for high-yield content points (Screenshot 4)
+  const renderReaderView = () => {
+    const activeChapter = flattenedChapters[activeChapterIndex];
+    if (!activeChapter) return null;
+
+    return (
+      <View style={styles.readerContainer}>
+        {/* Subheader progress banner */}
+        <View style={styles.readerSubHeader}>
+          <Typography variant="body" bold color={theme.textPrimary} style={styles.readerSubTitle}>
+            {activeChapter.title.split('.')[0] || activeChapter.title}
+          </Typography>
+          <Typography variant="body" bold color={theme.textSecondary}>
+            {activeChapterIndex + 1}/{flattenedChapters.length}
+          </Typography>
+        </View>
+
+        <ScrollView contentContainerStyle={styles.readerScroll} showsVerticalScrollIndicator={false}>
+          {activeChapter.bullets.map((bullet, idx) => {
+            // Find bold title separator in bullet text if exists
+            const parts = bullet.split(':');
+            const boldPart = parts[0];
+            const rest = parts.slice(1).join(':');
+
+            return (
+              <View key={idx} style={styles.bulletRow}>
+                <Typography variant="body" color={theme.textPrimary} style={styles.bulletPointDot}>
+                  •
+                </Typography>
+                <Typography variant="body" color={theme.textPrimary} style={styles.bulletText}>
+                  {rest ? (
+                    <>
+                      <Typography variant="body" bold>{boldPart}:</Typography>
+                      {rest}
+                    </>
+                  ) : (
+                    bullet
+                  )}
+                </Typography>
+              </View>
+            );
+          })}
+        </ScrollView>
+
+        {/* Checkbox status bar */}
+        <View style={styles.checkboxBar}>
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => setIsCompleted(!isCompleted)}
+            style={styles.checkboxRow}
+          >
+            <View style={[
+              styles.checkboxBox,
+              { borderColor: theme.border },
+              isCompleted && { backgroundColor: theme.primary, borderColor: theme.primary }
+            ]}>
+              {isCompleted && <View style={styles.checkboxInner} />}
+            </View>
+            <Typography variant="body" bold color={theme.textPrimary}>
+              Mark as Complete
+            </Typography>
+          </TouchableOpacity>
+        </View>
+
+        {/* Navigation bottom buttons */}
+        <View style={styles.footerRow}>
+          <TouchableOpacity
+            onPress={handlePrevChapter}
+            disabled={activeChapterIndex === 0}
+            style={[styles.footerBtn, activeChapterIndex === 0 && { opacity: 0.4 }]}
+          >
+            <Typography variant="body" bold color={theme.textPrimary}>
+              Prev
+            </Typography>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={handleNextChapter}
+            disabled={activeChapterIndex === flattenedChapters.length - 1}
+            style={[
+              styles.nextActionBtn,
+              { backgroundColor: theme.primary },
+              activeChapterIndex === flattenedChapters.length - 1 && { opacity: 0.4 }
+            ]}
+          >
+            <Typography variant="body" bold color="#FFFFFF">
+              Next
+            </Typography>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  };
+
+  // --- Render bottom sheet overlay for topics filter (Screenshot 3) ---
+  const renderBottomSheet = () => {
+    const list = [
+      { name: 'Vertebral Curves', count: 25 },
+      { name: 'Introduction', count: 15 },
+      { name: 'Definition and scope', count: 15 },
+      { name: 'Branches of anatomy', count: 5 },
+      { name: 'Anatomical terminology', count: 23 },
+      { name: 'Anatomical positions', count: 25 },
+      { name: 'CSF', count: 15 },
+      { name: 'Levels of structural organization', count: 15 },
+      { name: 'Systems of the human body overview', count: 5 },
+      { name: 'Tissue types', count: 23 },
+    ];
+
+    return (
+      <Modal
+        visible={bottomSheetVisible}
+        transparent
+        animationType="slide"
+        onRequestClose={() => setBottomSheetVisible(false)}
+      >
+        <View style={styles.sheetOverlay}>
+          {/* Backdrop click closer */}
+          <TouchableOpacity
+            activeOpacity={1}
+            style={styles.sheetBackdrop}
+            onPress={() => setBottomSheetVisible(false)}
+          />
+          
+          <View style={styles.sheetContent}>
+            {/* Grabber indicator bar */}
+            <View style={styles.sheetGrabber} />
+
+            <View style={styles.sheetHeader}>
+              <Typography variant="h2" bold color={theme.textPrimary}>
+                Anatomy
+              </Typography>
+            </View>
+
+            <ScrollView contentContainerStyle={styles.sheetScroll}>
+              {list.map((item, idx) => (
+                <TouchableOpacity
+                  key={idx}
+                  style={styles.sheetItemRow}
+                  onPress={() => {
+                    setBottomSheetVisible(false);
+                    // Filter or change chapters list
+                  }}
+                >
+                  <Typography variant="body" color={theme.textPrimary}>
+                    {item.name}
+                  </Typography>
+                  <Typography variant="caption" color={theme.textSecondary}>
+                    {item.count} Modules
+                  </Typography>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+          </View>
+        </View>
+      </Modal>
+    );
+  };
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+      <StatusBar barStyle="dark-content" />
+
+      {/* Header */}
+      {!hideHeader && (
+        <View style={styles.header}>
+          <TouchableOpacity onPress={handleBackPress} style={styles.backButton}>
+            <Icon name="arrow-left" size={20} color={theme.textPrimary} />
+          </TouchableOpacity>
+
+          <Typography variant="h2" bold style={styles.headerTitle}>
+            Pearls
+          </Typography>
+
+          {currentView === 'chapters' ? (
+            <TouchableOpacity onPress={() => setBottomSheetVisible(true)} style={styles.headerRightBtn}>
+              <Icon name="list" size={20} color={theme.textPrimary} />
+            </TouchableOpacity>
+          ) : currentView === 'topics' ? (
+            <TouchableOpacity style={styles.headerRightBtn}>
+              <Icon name="search" size={20} color={theme.textPrimary} />
+            </TouchableOpacity>
+          ) : (
+            <View style={styles.headerRightPlaceholder} />
+          )}
+        </View>
+      )}
+
+      {/* Render Active Sub-View */}
+      <View style={styles.mainViewContainer}>
+        {currentView === 'topics' && renderTopicsView()}
+        {currentView === 'chapters' && renderChaptersView()}
+        {currentView === 'reader' && renderReaderView()}
+      </View>
+
+      {/* Slide-Up filter bottom sheet overlay */}
+      {renderBottomSheet()}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  backButton: {
+    padding: 6,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  headerRightBtn: {
+    padding: 6,
+  },
+  headerRightPlaceholder: {
+    width: 32,
+  },
+  mainViewContainer: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 24,
+  },
+  sectionHeaderTitle: {
+    fontSize: 16,
+    marginBottom: 16,
+  },
+  listContainer: {
+    marginTop: 4,
+  },
+  topicCard: {
+    padding: 14,
+    marginBottom: 10,
+    borderRadius: 12,
+  },
+  topicRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconCircle: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 14,
+  },
+  topicLabelText: {
+    fontSize: 14,
+  },
+  // --- Chapters list design styles ---
+  sectionBlock: {
+    marginBottom: 20,
+  },
+  sectionHeading: {
+    fontSize: 16,
+    marginBottom: 12,
+  },
+  chaptersList: {
+    marginTop: 2,
+  },
+  chapterCard: {
+    padding: 12,
+    marginBottom: 10,
+    borderRadius: 12,
+  },
+  chapterRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  chapterNumber: {
+    fontSize: 14,
+    width: 24,
+    textAlign: 'center',
+    marginRight: 8,
+  },
+  chapterTitle: {
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 18,
+  },
+  chapterBadgeCol: {
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    marginLeft: 8,
+  },
+  freeBadge: {
+    borderWidth: 1.5,
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+  },
+  freeText: {
+    fontSize: 9,
+  },
+  lockCircle: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: '#F1F5F9',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  // --- Reader view design styles ---
+  readerContainer: {
+    flex: 1,
+  },
+  readerSubHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+  },
+  readerSubTitle: {
+    flex: 1,
+    fontSize: 14,
+    marginRight: 16,
+  },
+  readerScroll: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+  },
+  bulletRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 16,
+  },
+  bulletPointDot: {
+    fontSize: 18,
+    marginRight: 10,
+    lineHeight: 20,
+  },
+  bulletText: {
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  checkboxBar: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+  },
+  checkboxRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  checkboxBox: {
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderRadius: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  checkboxInner: {
+    width: 10,
+    height: 10,
+    borderRadius: 2,
+    backgroundColor: '#FFFFFF',
+  },
+  footerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF',
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    justifyContent: 'space-between',
+  },
+  footerBtn: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  nextActionBtn: {
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    borderRadius: 8,
+    minWidth: 80,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  // --- Slide-up Sheet styling details ---
+  sheetOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    justifyContent: 'flex-end',
+  },
+  sheetBackdrop: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  sheetContent: {
+    backgroundColor: '#FFFFFF',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    maxHeight: SCREEN_HEIGHT * 0.7,
+    paddingBottom: 20,
+  },
+  sheetGrabber: {
+    width: 40,
+    height: 4,
+    backgroundColor: '#E2E8F0',
+    borderRadius: 2,
+    alignSelf: 'center',
+    marginTop: 8,
+    marginBottom: 16,
+  },
+  sheetHeader: {
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F1F5F9',
+  },
+  sheetScroll: {
+    paddingHorizontal: 20,
+    paddingVertical: 8,
+  },
+  sheetItemRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F8FAFC',
+  },
+});