import { $, Card, CardToolbarItemOptions, CardType, isEngine, NodeInterface, ToolbarItemOptions } from '@aomao/engine';
import { App, createApp } from 'vue';
import { MathValue } from './type';
import MathFormula from './math-formula.vue';

export const editIcon = `<span class="draw-icon-edit">
  <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1777" width="16" height="16">
    <path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z" fill="#595959"></path>
  </svg>
</span>`;

class Math<V extends MathValue = MathValue> extends Card<V> {
  static get cardName() {
    return 'math';
  }

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

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

  toolbar(): Array<ToolbarItemOptions | CardToolbarItemOptions> {
    if (!isEngine(this.editor) || this.editor.readonly) return [];
    return [
      // {
      //   type: "dnd",
      // },
      {
        type: 'node',
        node: $(editIcon),
        didMount: node => {
          node.on('click', () => {
            this.defaultVisible = true;
            this.didRender();
          });
        },
      },
      {
        type: 'copy',
      },
      {
        type: 'delete',
      },
    ];
  }

  defaultVisible = false;

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

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

  destroy() {
    super.destroy();
    this.vm?.unmount();
  }
}
export default Math;
