import Vue from 'vue';
import { defaults } from 'lodash';
import ToolbarItem from '../toolbar_item.vue';
import buildHtmlToMarkdownRenderer from './build_html_to_markdown_renderer';
import buildCustomHTMLRenderer from './build_custom_renderer';
import { TOOLBAR_ITEM_CONFIGS, VIDEO_ATTRIBUTES } from '../constants';
import sanitizeHTML from './sanitize_html';

const buildWrapper = (propsData) => {
  const instance = new Vue({
    render(createElement) {
      return createElement(ToolbarItem, propsData);
    },
  });

  instance.$mount();
  return instance.$el;
};

const buildVideoIframe = (src) => {
  const wrapper = document.createElement('figure');
  const iframe = document.createElement('iframe');
  const videoAttributes = { ...VIDEO_ATTRIBUTES, src };
  const wrapperClasses = ['gl-relative', 'gl-h-0', 'video_container'];
  const iframeClasses = ['gl-absolute', 'gl-top-0', 'gl-left-0', 'gl-w-full', 'gl-h-full'];

  wrapper.setAttribute('contenteditable', 'false');
  wrapper.classList.add(...wrapperClasses);
  iframe.classList.add(...iframeClasses);
  Object.assign(iframe, videoAttributes);

  wrapper.appendChild(iframe);

  return wrapper;
};

const buildImg = (alt, originalSrc, file) => {
  const img = document.createElement('img');
  const src = file ? URL.createObjectURL(file) : originalSrc;
  const attributes = { alt, src };

  if (file) {
    img.dataset.originalSrc = originalSrc;
  }

  Object.assign(img, attributes);

  return img;
};

export const generateToolbarItem = (config) => {
  const { icon, classes, event, command, tooltip, isDivider } = config;

  if (isDivider) {
    return 'divider';
  }

  return {
    type: 'button',
    options: {
      el: buildWrapper({ props: { icon, tooltip }, class: classes }),
      event,
      command,
    },
  };
};

export const addCustomEventListener = (editorApi, event, handler) => {
  editorApi.eventManager.addEventType(event);
  editorApi.eventManager.listen(event, handler);
};

export const removeCustomEventListener = (editorApi, event, handler) =>
  editorApi.eventManager.removeEventHandler(event, handler);

export const addImage = ({ editor }, { altText, imageUrl }, file) => {
  if (editor.isWysiwygMode()) {
    const img = buildImg(altText, imageUrl, file);
    editor.getSquire().insertElement(img);
  } else {
    editor.insertText(`![${altText}](${imageUrl})`);
  }
};

export const insertVideo = ({ editor }, url) => {
  const videoIframe = buildVideoIframe(url);

  if (editor.isWysiwygMode()) {
    editor.getSquire().insertElement(videoIframe);
  } else {
    editor.insertText(videoIframe.outerHTML);
  }
};

export const getMarkdown = (editorInstance) => editorInstance.invoke('getMarkdown');

/**
 * This function allow us to extend Toast UI HTML to Markdown renderer. It is
 * a temporary measure because Toast UI does not provide an API
 * to achieve this goal.
 */
export const registerHTMLToMarkdownRenderer = (editorApi) => {
  const { renderer } = editorApi.toMarkOptions;

  Object.assign(editorApi.toMarkOptions, {
    renderer: renderer.constructor.factory(renderer, buildHtmlToMarkdownRenderer(renderer)),
  });
};

export const getEditorOptions = (externalOptions) => {
  return defaults({
    customHTMLRenderer: buildCustomHTMLRenderer(externalOptions?.customRenderers),
    toolbarItems: TOOLBAR_ITEM_CONFIGS.map((toolbarItem) => generateToolbarItem(toolbarItem)),
    customHTMLSanitizer: (html) => sanitizeHTML(html),
  });
};