SWE/TeacherDashboard/js/topics/topicManager.js

import { SubjectStorage } from '../subjects/SubjectStorage.js';

export class TopicManager {
    constructor() {
        this.subjectStorage = new SubjectStorage();
        this.quill = null;
        this.initializeEventListeners();
    }

    initializeEditor() {
        const toolbarOptions = [
            ['undo', 'redo'],
            [{ 'header': [1, 2, false] }],
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'script': 'sub'}, { 'script': 'super' }],
            [{ 'indent': '-1'}, { 'indent': '+1' }],
            ['link', 'image', 'formula'],
            ['clean']
        ];

        const editorOptions = {
            modules: {
                toolbar: toolbarOptions,
                keyboard: {
                    bindings: {
                        custom1: {
                            key: 'Z',
                            shortKey: true,
                            handler: () => this.undo()
                        },
                        custom2: {
                            key: 'Z',
                            shortKey: true,
                            shiftKey: true,
                            handler: () => this.redo()
                        },
                        custom3: {
                            key: 'Delete',
                            handler: () => this.deleteSelected()
                        }
                    }
                },
                history: {
                    delay: 1000,
                    maxStack: 500,
                    userOnly: true
                }
            },
            theme: 'snow',
            formats: [
                'header',
                'bold', 'italic', 'underline', 'strike',
                'list', 'bullet',
                'indent',
                'link', 'image',
                'code-block',
                'blockquote',
                'clean'
            ]
        };

        this.quill = new Quill('#quillEditor', editorOptions);
        this.quill.on('text-change', () => {
            this.updatePreview();
        });
    }

    undo() {
        if (this.quill) {
            this.quill.history.undo();
        }
    }

    redo() {
        if (this.quill) {
            this.quill.history.redo();
        }
    }

    deleteSelected() {
        if (this.quill) {
            const range = this.quill.getSelection();
            if (range) {
                if (range.length > 0) {
                    // Delete selected text/content
                    this.quill.deleteText(range.index, range.length);
                } else {
                    // Delete current line if no selection
                    const [line] = this.quill.getLine(range.index);
                    const lineLength = line.length();
                    this.quill.deleteText(range.index - lineLength, lineLength);
                }
            }
        }
    }

    async loadSubjectsIntoSelect() {
        const select = document.getElementById('topicSubjectSelect');
        if (!select) return;

        // Clear existing options except the first placeholder
        while (select.options.length > 1) {
            select.remove(1);
        }

        try {
            const subjects = await this.subjectStorage.getAllSubjects();
            subjects.forEach(subject => {
                const option = document.createElement('option');
                option.value = subject.id;
                option.textContent = subject.name;
                select.appendChild(option);
            });
        } catch (error) {
            console.error('Error loading subjects:', error);
        }
    }

    initializeEventListeners() {
        const form = document.getElementById('topicForm');
        if (form) {
            form.addEventListener('submit', (e) => this.handleTopicSubmit(e));
        }
        document.addEventListener('openTopicModal', () => {
            this.loadSubjectsIntoSelect();
            if (!this.quill) {
                this.initializeEditor();
            }
        });
    }

    updatePreview() {
        const content = this.quill.root.innerHTML;
        const preview = document.getElementById('contentPreview');
        const quillContent = document.getElementById('quillContent');
        
        if (preview) {
            // Preserve classes for styling while updating content
            preview.innerHTML = content;
            // Update hidden input with content
            if (quillContent) {
                quillContent.value = content;
            }
            // Re-render math if present
            if (window.MathJax) {
                MathJax.typeset([preview]);
            }
            // Highlight code blocks if any
            if (window.Prism) {
                Prism.highlightAllUnder(preview);
            }
        }
    }

    handleTopicSubmit(e) {
        e.preventDefault();
        const formData = new FormData(e.target);
        const content = this.quill.root.innerHTML;
        const subjectId = formData.get('subject');
        
        if (!subjectId) {
            throw new Error('Bitte wählen Sie ein Fach aus');
        }

        // Add your topic saving logic here
        
        closeModal('topicModal');
    }

    clearEditor() {
        if (this.quill) {
            this.quill.setContents([]);
            this.updatePreview();
        }
    }
}