dees-catalog/ts_web/elements/wysiwyg/wysiwyg.modalmanager.ts

import { html, type TemplateResult } from '@design.estate/dees-element';
import { DeesModal } from '../dees-modal.js';
import { type IBlock } from './wysiwyg.types.js';
import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';

export class WysiwygModalManager {
  /**
   * Shows language selection modal for code blocks
   */
  static async showLanguageSelectionModal(): Promise<string | null> {
    return new Promise((resolve) => {
      let selectedLanguage: string | null = null;
      
      DeesModal.createAndShow({
        heading: 'Select Programming Language',
        content: html`
          <style>
            .language-grid {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 8px;
              padding: 16px;
            }
            .language-button {
              padding: 12px;
              background: var(--dees-color-box);
              border: 1px solid var(--dees-color-line-bright);
              border-radius: 4px;
              cursor: pointer;
              text-align: center;
              transition: all 0.2s;
            }
            .language-button:hover {
              background: var(--dees-color-box-highlight);
              border-color: var(--dees-color-primary);
            }
          </style>
          <div class="language-grid">
            ${this.getLanguages().map(lang => html`
              <div class="language-button" @click="${(e: MouseEvent) => {
                selectedLanguage = lang.toLowerCase();
                const modal = (e.target as HTMLElement).closest('dees-modal');
                if (modal) {
                  const okButton = modal.shadowRoot?.querySelector('.bottomButton.ok') as HTMLElement;
                  if (okButton) okButton.click();
                }
              }}">${lang}</div>
            `)}
          </div>
        `,
        menuOptions: [
          {
            name: 'Cancel',
            action: async (modal) => {
              modal.destroy();
              resolve(null);
            }
          },
          {
            name: 'OK',
            action: async (modal) => {
              modal.destroy();
              resolve(selectedLanguage);
            }
          }
        ]
      });
    });
  }

  /**
   * Shows block settings modal
   */
  static async showBlockSettingsModal(
    block: IBlock, 
    onUpdate: (block: IBlock) => void
  ): Promise<void> {
    const content = html`
      <style>
        .settings-container {
          padding: 16px;
        }
        .settings-section {
          margin-bottom: 20px;
        }
        .settings-label {
          font-weight: 500;
          margin-bottom: 8px;
          color: var(--dees-color-text);
        }
        .block-type-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 8px;
          margin-bottom: 16px;
        }
        .block-type-button {
          padding: 12px;
          background: var(--dees-color-box);
          border: 1px solid var(--dees-color-line-bright);
          border-radius: 4px;
          cursor: pointer;
          text-align: center;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .block-type-button:hover {
          background: var(--dees-color-box-highlight);
          border-color: var(--dees-color-primary);
        }
        .block-type-button.selected {
          background: var(--dees-color-primary);
          color: white;
        }
        .block-type-icon {
          font-weight: 600;
          font-size: 16px;
        }
      </style>
      <div class="settings-container">
        ${this.getBlockTypeSelector(block, onUpdate)}
        ${block.type === 'code' ? this.getCodeBlockSettings(block, onUpdate) : ''}
      </div>
    `;
    
    DeesModal.createAndShow({
      heading: 'Block Settings',
      content,
      menuOptions: [
        {
          name: 'Close',
          action: async (modal) => {
            modal.destroy();
          }
        }
      ]
    });
  }

  /**
   * Gets code block settings content
   */
  private static getCodeBlockSettings(
    block: IBlock, 
    onUpdate: (block: IBlock) => void
  ): TemplateResult {
    const currentLanguage = block.metadata?.language || 'plain text';
    
    return html`
      <style>
        .settings-section {
          margin-bottom: 16px;
        }
        .settings-label {
          font-weight: 500;
          margin-bottom: 8px;
        }
        .language-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
        }
        .language-button {
          padding: 8px;
          background: var(--dees-color-box);
          border: 1px solid var(--dees-color-line-bright);
          border-radius: 4px;
          cursor: pointer;
          text-align: center;
          transition: all 0.2s;
        }
        .language-button:hover {
          background: var(--dees-color-box-highlight);
          border-color: var(--dees-color-primary);
        }
        .language-button.selected {
          background: var(--dees-color-primary);
          color: white;
        }
      </style>
      <div class="settings-section">
        <div class="settings-label">Programming Language</div>
        <div class="language-grid">
          ${this.getLanguages().map(lang => html`
            <div class="language-button ${currentLanguage === lang.toLowerCase() ? 'selected' : ''}" 
              @click="${(e: MouseEvent) => {
                if (!block.metadata) block.metadata = {};
                block.metadata.language = lang.toLowerCase();
                onUpdate(block);
                
                // Close modal
                const modal = (e.target as HTMLElement).closest('dees-modal');
                if (modal) {
                  const closeButton = modal.shadowRoot?.querySelector('.bottomButton') as HTMLElement;
                  if (closeButton) closeButton.click();
                }
              }}">${lang}</div>
          `)}
        </div>
      </div>
    `;
  }

  /**
   * Gets available programming languages
   */
  private static getLanguages(): string[] {
    return [
      'JavaScript', 'TypeScript', 'Python', 'Java', 
      'C++', 'C#', 'Go', 'Rust', 'HTML', 'CSS', 
      'SQL', 'Shell', 'JSON', 'YAML', 'Markdown', 'Plain Text'
    ];
  }

  /**
   * Gets block type selector
   */
  private static getBlockTypeSelector(
    block: IBlock,
    onUpdate: (block: IBlock) => void
  ): TemplateResult {
    const blockTypes = WysiwygShortcuts.getSlashMenuItems().filter(item => item.type !== 'divider');
    
    return html`
      <div class="settings-section">
        <div class="settings-label">Block Type</div>
        <div class="block-type-grid">
          ${blockTypes.map(item => html`
            <div 
              class="block-type-button ${block.type === item.type ? 'selected' : ''}"
              @click="${async (e: MouseEvent) => {
                const oldType = block.type;
                block.type = item.type as IBlock['type'];
                
                // Reset metadata for type change
                if (oldType === 'code' && block.type !== 'code') {
                  delete block.metadata?.language;
                } else if (oldType === 'list' && block.type !== 'list') {
                  delete block.metadata?.listType;
                } else if (block.type === 'list' && !block.metadata?.listType) {
                  block.metadata = { listType: 'bullet' };
                } else if (block.type === 'code' && !block.metadata?.language) {
                  // Ask for language if changing to code block
                  const language = await this.showLanguageSelectionModal();
                  if (language) {
                    block.metadata = { language };
                  } else {
                    // User cancelled, revert
                    block.type = oldType;
                    return;
                  }
                }
                
                onUpdate(block);
                
                // Close modal after selection
                const modal = (e.target as HTMLElement).closest('dees-modal');
                if (modal) {
                  const closeButton = modal.shadowRoot?.querySelector('.bottomButton') as HTMLElement;
                  if (closeButton) closeButton.click();
                }
              }}"
            >
              <span class="block-type-icon">${item.icon}</span>
              <span>${item.label}</span>
            </div>
          `)}
        </div>
      </div>
    `;
  }
}