import './tp-rtb-link-dialog.js';
import { html } from 'lit';
import { TpRtbBaseExtension } from './tp-rtb-base-extension.js';
import Link from '@tiptap/extension-link';

class TpRtbLink extends TpRtbBaseExtension {
  constructor() {
    super();
    this.label = 'Link';
  }

  render() {
    return html`
      ${super.render()}

      <slot name="dialog" @link-save=${this._saveLink}>
        <tp-rtb-link-dialog></tp-rtb-link-dialog>
      </slot>
    `;
  }

  static get properties() {
    return {
      url: { type: String },
      text: { type: String },
    };
  }

  getExtension() {
    return Link.configure({
      autolink: true,
      linkOnPaste: true,
      openOnClick: false, // We will handle opening links manually
    });
  }

  _handleClick() {
    if (this.parentEditor && this.parentEditor.editor) {
      const { editor } = this.parentEditor;
      const { selection } = editor.state;
      const { from, to } = selection;
      this.text = editor.state.doc.textBetween(from, to, ' ');
      this.url = editor.getAttributes('link').href || '';

      this._dialog.show({
        url: this.url,
        text: this.text
      });
    }
  }

  _saveLink(e) {
    const { url, text } = e.detail;
    const { editor } = this.parentEditor;

    if (url) {
      editor.chain().focus().setLink({ href: url }).run();

      if (text && editor.state.selection.empty) {
        editor.chain().focus().insertContent(text).run();
      }
    } else {
      editor.chain().focus().unsetLink().run();
    }
  }

  get _dialog() {
    return this.querySelector('[slot="dialog"]') || this.shadowRoot.querySelector('tp-rtb-link-dialog');
  }

  _setupEditorListeners() {
    const { editor } = this.parentEditor;
    
    editor.on('selectionUpdate', () => {
      this.active = editor.isActive('link');
    });
    
    editor.on('focus', () => {
      this.active = editor.isActive('link');
    });
  }
}

customElements.define('tp-rtb-link', TpRtbLink);