import { whenReady } from "./dom.js";
import { attachAutocomplete, linkifyElement } from "./board-refs.js";
import { getBoardContext, getBoardRefManifest } from "./board-context.js";

var boardMarkdownConverter = null;

export function linkifyMarkdownElement(el) {
  if (!el || !getBoardRefManifest()) return;
  var ctx = getBoardContext();
  if (!ctx.project) return;
  linkifyElement(el, getBoardRefManifest(), ctx.project);
}

export function attachBoardRefAutocomplete(textarea) {
  if (!textarea || !getBoardRefManifest()) return;
  attachAutocomplete(textarea, getBoardRefManifest());
}

function getBoardMarkdownConverter() {
  if (!boardMarkdownConverter && typeof showdown !== 'undefined') {
    boardMarkdownConverter = new showdown.Converter({ ghCompatibleHeaderId: true });
  }
  return boardMarkdownConverter;
}

function markdownToHtml(source) {
  var conv = getBoardMarkdownConverter();
  if (!conv) return null;
  return conv.makeHtml(source || '');
}

function htmlToPlainPreview(html) {
  var tmp = document.createElement('div');
  tmp.innerHTML = html;
  return (tmp.textContent || '').replace(/\s+/g, ' ').trim();
}

function markdownPlainPreview(source, maxLen) {
  var md = source || '';
  var html = markdownToHtml(md);
  var text = html !== null ? htmlToPlainPreview(html) : md.replace(/\s+/g, ' ').trim();
  if (maxLen && text.length > maxLen) return text.slice(0, maxLen) + '\u2026';
  return text;
}

export function getMarkdownFromElement(el) {
  if (!el) return '';
  if (Object.prototype.hasOwnProperty.call(el.dataset, 'boardMarkdown')) {
    return el.dataset.boardMarkdown;
  }
  return (el.textContent || '').trim();
}

export function setMarkdownElement(el, source) {
  if (!el) return;
  var md = source || '';
  el.dataset.boardMarkdown = md;
  el.classList.add('markdown-body', 'board-card-markdown');
  function apply() {
    var html = markdownToHtml(md);
    if (html !== null) {
      el.innerHTML = html;
      linkifyMarkdownElement(el);
    } else {
      el.textContent = md;
    }
  }
  if (typeof showdown !== 'undefined') {
    apply();
  } else {
    el.textContent = md;
    whenReady('Showdown-script', 'showdown', apply);
  }
}

export function syncCompactDescription(card, source) {
  var preview = card.querySelector('.board-card-description-preview');
  var full = card.querySelector('.board-card-description-full');
  var md = source !== undefined ? source : getMarkdownFromElement(full);
  if (preview) {
    preview.textContent = md ? markdownPlainPreview(md, 120) : '';
    preview.dataset.boardMarkdown = md;
  }
}