import { EmbedOptions, EmbedValue, EmbedRenderBeforeEvent } from '../types';
import { $, Card, CardType, NodeInterface, CardToolbarItemOptions, ToolbarItemOptions, isEngine } from '@aomao/engine';
import { App, createApp, createVNode } from 'vue';
import { Modal } from 'ant-design-vue';
import DrawView from './draw-view.vue';
import DrawEdit from './draw-edit.vue';
import './index.css';

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 EmbedComponent<V extends EmbedValue = EmbedValue> extends Card<V> {
  renderBefore?: EmbedRenderBeforeEvent;

  static get cardName() {
    return 'draw';
  }

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

  static get lazyRender() {
    return true;
  }

  static get singleSelectable() {
    return false;
  }

  static get autoSelected() {
    return false;
  }

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

  resize = () => {
    const value = this.getValue();
    if (!value?.isResize) return;
    return this.#drawContent?.parent();
  };

  toolbar(): Array<ToolbarItemOptions | CardToolbarItemOptions> {
    const getItems = () => {
      if (isEngine(this.editor) && !this.editor.readonly) {
        const items: Array<CardToolbarItemOptions | ToolbarItemOptions> = [
          { type: 'dnd' },
          {
            type: 'node',
            node: $(editIcon),
            didMount: node => {
              if (node?.get()) {
                node.on('click', () => {
                  const value = this.getValue();
                  createApp(DrawEdit, {
                    value: value.xml,
                    change: (xml: string) => {
                      this.setValue({
                        ...value,
                        xml,
                      });
                      this.didRender();
                    },
                  }).mount(node.get() as Element);
                });
              }
            },
          },
          { type: 'copy' },
          { type: 'separator' },
          { type: 'delete' },
        ];
        return items;
      }
      return [];
    };
    return getItems();
  }

  renderContainer() {
    const value = this.getValue();
    const height = value?.height || 'auto';

    const container = $(`
			<div class="data-draw data-draw-container">
				<div 
          class="data-draw-body" 
          style="height:${height === 'auto' ? '' : height + 'px'}"
        >
					<div class="data-draw-content">
          </div>
          <span class="data-draw-maximize">
            <span class="data-icon data-icon-maximize"></span>
          </span>
				</div>
			</div>
		`);
    const drawContent = container.find('.data-draw-content');
    const maximize = container.find('.data-draw-maximize');
    maximize.on('click', () => {
      const value = this.getValue();
      Modal.confirm({
        icon: null,
        content: createVNode(DrawView, { value: value.xml }),
        wrapClassName: 'draw-full-modal',
        width: '100%',
        cancelText: '关 闭',
        closable: true,
      });
    });
    if (value?.height) {
      drawContent.attributes('data-height', value.height);
    }
    this.#drawContent = drawContent;
    return container;
  }

  render(renderBefore?: EmbedRenderBeforeEvent): string | void | NodeInterface {
    this.renderBefore = renderBefore;
    const center = this.getCenter();
    center.empty();
    center.append(this.renderContainer());
  }

  didRender() {
    super.didRender();
    const value = this.getValue();
    this.vm = createApp(DrawView, { value: value.xml });
    this.vm.mount(this.#drawContent?.get<HTMLElement>());
  }

  destroy() {
    super.destroy();
    this.vm?.unmount();
    this.vm = undefined;
  }
}

export default EmbedComponent;
