/**
@license
Copyright (c) 2025 trading_peter
This program is available under Apache License Version 2.0
*/

import '../../tp-rich-text-box.js';
import '../../tp-rtb-bold.js';
import '../../tp-rtb-italic.js';
import '../../tp-rtb-strike.js';
import '../../tp-rtb-underline.js';
import '../../tp-rtb-code.js';
import '../../tp-rtb-clear-format.js';
import '../../tp-rtb-link.js';
import '../../tp-rtb-undo.js';
import '../../tp-rtb-redo.js';
import '../../tp-rtb-emoji-suggestion.js';
import '../../tp-rtb-user-mention.js';

import { LitElement, html, css } from 'lit';

class TheApp extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          display: flex;
          flex-direction: column;
          position: absolute;
          inset: 0;
          font-family: sans-serif;
        }

        [slot="editor-content"] {
          padding: 8px;
          flex-grow: 1;
          border: 1px solid #ccc;
          min-height: 100px;
        }
      `
    ];
  }

  render() {
    return html`
      <tp-rich-text-box>
        <div slot="content" id="editor-content-element"></div>
        <!-- Selection Menu Controls -->
        <tp-rtb-bold></tp-rtb-bold>
        <tp-rtb-italic></tp-rtb-italic>
        <tp-rtb-strike></tp-rtb-strike>
        <tp-rtb-underline></tp-rtb-underline>
        <tp-rtb-code></tp-rtb-code>
        <tp-rtb-clear-format></tp-rtb-clear-format>
        <tp-rtb-link></tp-rtb-link>
        <tp-rtb-undo></tp-rtb-undo>
        <tp-rtb-redo></tp-rtb-redo>
        <!-- Suggestion Menu Content -->
        <tp-rtb-emoji-suggestion slot="suggestion-content"></tp-rtb-emoji-suggestion>
        <tp-rtb-user-mention slot="suggestion-content"></tp-rtb-user-mention>
      </tp-rich-text-box>
      <div style="margin-top: 20px;">
        <button @click="${this._saveContent}">Save JSON</button>
        <button @click="${this._loadContent}">Load JSON</button>
      </div>
      <div style="margin-top: 10px; font-size: 14px; color: #666;">
        <p><strong>Instructions:</strong></p>
        <ul>
          <li>Select text to see formatting controls</li>
          <li>Type ":" for emoji suggestions (e.g., ":grinning")</li>
          <li>Type "@" for user mentions (e.g., "@john")</li>
        </ul>
      </div>
      <textarea id="jsonContent" style="width: 100%; height: 200px; margin-top: 10px;"></textarea>
    `;
  }

  static get properties() {
    return {
      _editor: { type: Object },
    };
  }

  constructor() {
    super();
    this._editor = null;
  }

  firstUpdated() {
    this._editor = this.shadowRoot.querySelector('tp-rich-text-box');
  }

  _saveContent() {
    if (this._editor) {
      const jsonContent = this._editor.value;
      this.shadowRoot.querySelector('#jsonContent').value = JSON.stringify(jsonContent, null, 2);
      console.log('Content saved:', jsonContent);
    }
  }

  _loadContent() {
    if (this._editor) {
      try {
        const jsonContent = JSON.parse(this.shadowRoot.querySelector('#jsonContent').value);
        this._editor.value = jsonContent;
        console.log('Content loaded:', jsonContent);
      } catch (e) {
        console.error('Invalid JSON:', e);
        alert('Invalid JSON content. Please check the textarea.');
      }
    }
  }
}

window.customElements.define('the-app', TheApp);