svelte-mud/src/lib/utils/ModalHelper.ts

import { ProfileManager } from '$lib/profiles/ProfileManager';
import { get } from 'svelte/store';
import { activeProfile } from '$lib/stores/mudStore';
import type { MudProfile } from '$lib/profiles/ProfileManager';
import type { Trigger } from '$lib/triggers/TriggerSystem';
import Modal from '$lib/components/Modal.svelte';
import ProfileEditor from '$lib/components/ProfileEditor.svelte';
import TriggerEditor from '$lib/components/TriggerEditor.svelte';

/**
 * Helper class for creating and showing modals programmatically
 */
export class ModalHelper {
  private static modal: Modal | null = null;
  private static profileManager = new ProfileManager();

  /**
   * Show the full-featured profile editor modal
   * @param onSave Callback when profile is saved
   * @param onCancel Callback when operation is cancelled
   * @param existingProfile Optional existing profile to edit
   */
  static showProfileEditor(
    onSave: (profile: MudProfile) => void,
    onCancel: () => void,
    existingProfile?: MudProfile
  ): void {
    console.log('ModalHelper.showProfileEditor called');
    
    try {
      // Make sure document.body is available
      if (!document.body) {
        throw new Error('document.body is not available');
      }
      
      // Destroy existing modal if it exists to prevent memory leaks
      if (this.modal) {
        try {
          this.modal.$destroy();
        } catch (error) {
          console.error('Error destroying previous modal:', error);
        }
        this.modal = null;
      }
      
      // Create a new modal instance
      console.log('Creating new Modal instance');
      this.modal = new Modal({
        target: document.body,
        props: {
          closable: true,
          title: '',
        }
      });
      
      if (!this.modal) {
        throw new Error('Failed to create modal instance');
      }
      
      // Get profile to edit or create new one
      const profile = existingProfile || this.profileManager.createDefaultProfile();
      const isNewProfile = !existingProfile;
      
      console.log('Setting up modal with profile:', profile);
      
      // Set up the modal with a short delay to ensure the DOM is ready
      setTimeout(() => {
        if (this.modal) {
          // Set up the modal
          this.modal.setProps({
            title: isNewProfile ? 'Create New Profile' : 'Edit Profile',
            component: ProfileEditor,
            componentProps: {
              profile,
              isNewProfile
            },
            onSubmit: (result) => {
              console.log('Modal submit callback with result:', result);
              onSave(result.profile);
            },
            onCancel: () => {
              console.log('Modal cancel callback');
              onCancel();
            }
          });
          
          // Open the modal
          this.modal.open();
          console.log('Modal opened');
        } else {
          console.error('Modal instance was destroyed before it could be opened');
        }
      }, 50);
    } catch (error) {
      console.error('Error in showProfileEditor:', error);
      // Call onCancel to ensure the flow continues even if there's an error
      onCancel();
      throw error; // Re-throw to allow +page.svelte to handle it
    }
  }

  /**
   * Show the trigger editor modal
   * @param onSave Callback when trigger is saved
   * @param onCancel Callback when operation is cancelled
   * @param existingTrigger Optional existing trigger to edit
   */
  static showTriggerEditor(
    onSave: (trigger: Trigger) => void,
    onCancel: () => void,
    existingTrigger?: Trigger
  ): void {
    console.log('ModalHelper.showTriggerEditor called');
    
    try {
      // Make sure document.body is available
      if (!document.body) {
        throw new Error('document.body is not available');
      }
      
      // Destroy existing modal if it exists to prevent memory leaks
      if (this.modal) {
        try {
          this.modal.$destroy();
        } catch (error) {
          console.error('Error destroying previous modal:', error);
        }
        this.modal = null;
      }
      
      // Create a new modal instance
      console.log('Creating new Modal instance');
      this.modal = new Modal({
        target: document.body,
        props: {
          closable: true,
          title: '',
        }
      });
      
      if (!this.modal) {
        throw new Error('Failed to create modal instance');
      }
      
      const isNewTrigger = !existingTrigger;
      
      console.log('Setting up trigger modal:', existingTrigger || 'new trigger');
      
      // Set up the modal with a short delay to ensure the DOM is ready
      setTimeout(() => {
        if (this.modal) {
          // Set up the modal
          this.modal.setProps({
            title: isNewTrigger ? 'Create New Trigger' : 'Edit Trigger',
            component: TriggerEditor,
            componentProps: {
              trigger: existingTrigger || null,
              isNew: isNewTrigger
            },
            onSubmit: (result) => {
              console.log('Modal submit callback with result:', result);
              onSave(result.trigger);
            },
            onCancel: () => {
              console.log('Modal cancel callback');
              onCancel();
            }
          });
          
          // Open the modal
          this.modal.open();
          console.log('Modal opened');
        } else {
          console.error('Modal instance was destroyed before it could be opened');
        }
      }, 50);
    } catch (error) {
      console.error('Error in showTriggerEditor:', error);
      // Call onCancel to ensure the flow continues even if there's an error
      onCancel();
      throw error; // Re-throw to allow +page.svelte to handle it
    }
  }
}