import { Boot, DomEditor, IButtonMenu, IDomEditor, SlateElement, SlateText, SlateTransforms } from '@wangeditor/editor';
import { createVNode, defineAsyncComponent } from 'vue';
import { Modal } from '@arco-design/web-vue';
import { h, VNode } from 'snabbdom';
import { Node } from 'slate';

type ProjectCardElement = { type: 'project-card'; id: number; name: string; cover: string; children: SlateText[] };

const MENU = {
  KEY: 'project-card',
  TITLE: '厂牌',
  ICON: '<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="arco-icon arco-icon-home" stroke-width="4" stroke-linecap="square" stroke-linejoin="miter" filter="" data-v-249840b0="" style="font-size: 32px;"><path d="M7 17 24 7l17 10v24H7V17Z"></path><path d="M20 28h8v13h-8V28Z"></path></svg>',
};

const DELETE_ICON = 'https://hi-sing-cdn.hikoon.com/image/20230818/tajefbycbk71692325471868yswxs35mag.png';

function withCard<T extends IDomEditor>(editor: T) {
  const { isVoid, isInline } = editor;

  const newEditor = editor;

  newEditor.isVoid = (elem) => {
    const type = DomEditor.getNodeType(elem);
    if (type === MENU.KEY) {
      return true;
    }

    return isVoid(elem);
  };

  newEditor.isInline = (elem) => {
    const type = DomEditor.getNodeType(elem);
    if (type === MENU.KEY) {
      return true;
    }

    return isInline(elem);
  };

  return newEditor;
}

function createCard(editor: IDomEditor, callback: () => void) {
  const ProjectTable = defineAsyncComponent(() => import('@/views/operation/banner/components/project-table.vue'));
  return createVNode(ProjectTable, {
    onCheck: (value: any) => {
      const { link_id, link_name, cover } = value;
      editor.insertNode({ type: MENU.KEY, id: link_id, name: link_name, cover, children: [{ text: '' }] } as Node);
      callback();
    },
  });
}

class ProjectCard implements IButtonMenu {
  title = MENU.TITLE;

  iconSvg = MENU.ICON;

  tag = 'button';

  getValue(): boolean {
    return false;
  }

  isActive(): boolean {
    return false;
  }

  isDisabled(): boolean {
    return false;
  }

  exec(editor: IDomEditor) {
    const modal = Modal.open({
      title: MENU.TITLE,
      content: () => createCard(editor, () => modal?.close()),
      width: '700px',
      footer: false,
      closable: true,
      escToClose: true,
      // @ts-ignore
      bodyStyle: { padding: '16px' },
    });
  }
}

const menuConf = { key: MENU.KEY, factory: () => new ProjectCard() };

const renderElemConf = {
  type: MENU.KEY,
  renderElem: (elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode => {
    const { name, cover } = elem as ProjectCardElement;

    return h(
      'span',
      {
        props: { contentEditable: false },
        style: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          background: '#f2f2f2',
          padding: '8px',
          border: '1px solid rgb(229,230,235)',
          boxShadow: '0 2px 5px 0 rgba(0, 0, 0, 0.08)',
          maxWidth: '400px',
        },
      },
      [
        h('img', {
          props: { src: cover, alt: '' },
          style: { width: '48px', height: '48px', borderRadius: '2pt' },
        }),
        h(
          'span',
          {
            props: { contentEditable: false },
            style: {
              flex: '1',
              margin: '0 6px',
              overflow: 'hidden',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              fontWeight: '500',
              color: '#4E5969',
            },
          },
          name
        ),
        h('img', {
          props: { src: DELETE_ICON, contentEditable: false },
          style: { width: '22px', visibility: editor.isDisabled() ? 'hidden' : 'visibility' },
          on: {
            click() {
              // eslint-disable-next-line func-names
              setTimeout(function () {
                const node = DomEditor.getSelectedNodeByType(editor, MENU.KEY);
                if (node) {
                  const path = DomEditor.findPath(editor, node);
                  SlateTransforms.removeNodes(editor, { at: path });
                }
              }, 150);
            },
          },
        }),
      ]
    );
  },
};

const parseHtmlConf = {
  selector: `span[data-w-e-type="${MENU.KEY}"]`,
  parseElemHtml: (domElem: Element): SlateElement => {
    const id = domElem.getAttribute('data-id') || 0;
    const name = domElem.getAttribute('data-name') || '';
    const cover = domElem.getAttribute('data-cover') || '';
    return { type: MENU.KEY, id, name, cover, children: [{ text: '' }] } as SlateElement;
  },
};

const elemToHtmlConf = {
  type: MENU.KEY,
  elemToHtml: (elem: SlateElement) => {
    const { id, name, cover } = elem as ProjectCardElement;
    return `<span style="display: flex;align-items:center;justify-content: space-between;background: #f2f2f2;padding: 8px;border:1px solid rgb(229,230,235);box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.08);margin: 4px" data-w-e-type="${MENU.KEY}" data-w-e-is-void data-w-e-is-inline data-id="${id}" data-name="${name}" data-cover="${cover}">
              <img src="${cover}" style="width: 3em !important;height: 3em !important;object-fit:fill;border-radius:2pt" alt="" />
              <span style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;flex: 1;margin: 0 6px;font-weight: 500;color: #4E5969">${name}</span>
              <img src="https://hi-sing-cdn.hikoon.com/image/20230822/sjzhgel3pwo1692672120063rjd093t6xd.png" style="width: 22px" alt="" />
            </span>`;
  },
};

Boot.registerModule({
  editorPlugin: withCard,
  renderElems: [renderElemConf],
  elemsToHtml: [elemToHtmlConf],
  parseElemsHtml: [parseHtmlConf],
  menus: [menuConf],
});