import { $, Card, CardType, NodeInterface, SelectStyleType } from '@aomao/engine';
import { App, createApp } from 'vue';
import TagComponent from './tag';
import type { TagValue } from './type';

class Tag extends Card<TagValue> {
  static get cardName() {
    return 'tag';
  }

  static get cardType() {
    return CardType.INLINE;
  }

  static get autoSelected() {
    return false;
  }

  static get singleSelectable() {
    return false;
  }

  static get selectStyleType() {
    return SelectStyleType.BACKGROUND;
  }

  #container?: NodeInterface;
  private vm?: App;

  defaultVisible = false;

  render(visible?: boolean) {
    this.#container = $('<div>Loading</div>');
    this.defaultVisible = visible ?? false;
    return this.#container;
  }

  didRender() {
    super.didRender();
    const value = this.getValue();
    const { editor } = this;
    setTimeout(() => {
      this.vm = createApp(TagComponent, {
        value,
        editor,
        defaultVisible: this.defaultVisible,
        change: (item: any) => {
          this.setValue({
            tagType: item.type,
            tagValue: item.text,
            isCustom: item.isCustom,
          });
        },
      });
      this.vm.mount(this.#container?.get<HTMLElement>());
    }, 20);
  }

  destroy() {
    super.destroy();
    this.vm?.unmount();
    this.vm = undefined;
  }
}
export default Tag;
export type { TagValue };
