/* global KEEP */

KEEP.initCodeBlockTools = () => {
  HTMLElement.prototype.wrap = function (wrapper) {
    this.parentNode.insertBefore(wrapper, this);
    this.parentNode.removeChild(this);
    wrapper.appendChild(this);
  };

  const { style: codeCopyStyle } = KEEP.theme_config?.code_copy;
  const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools;
  const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac';
  const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right';
  const { copy: copyLang, copied: copiedLang, fold: foldLang, folded: foldedLang } = KEEP.language_code_block;
  const foldDom = `<span class="tool fold tooltip" data-content="${foldLang}"><i class="fas fa-chevron-down"></i></span>`

  document.querySelectorAll('figure.highlight').forEach(element => {
    let codeLang = element.classList.length ? element.classList[1].toUpperCase() : '';
    if (codeLang === 'PLAINTEXT') { codeLang = '' }
    const highlightContainer = document.createElement('div');
    highlightContainer.classList.add('highlight-container');
    element.wrap(highlightContainer);


    const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}`

    highlightContainer.insertAdjacentHTML(
      'afterbegin',
      `<div class="code-tools-box">
        ${isMac ? foldDom + codeLangDom : '<span>' + foldDom + codeLangDom + '</span>'}
        <span class="tool copy tooltip" data-content="${copyLang}"><i class="fas fa-copy"></i></span>
      </div>`
    );
    const codeToolsBox = element.parentNode.querySelector('.code-tools-box');
    const copyDom = codeToolsBox.querySelector('.copy');
    const targetFoldDom = codeToolsBox.querySelector('.fold');

    copyDom.addEventListener('click', event => {
      const target = event.currentTarget;
      const code = [...element.querySelectorAll('.code .line')].map(line => line.innerText).join('\n');
      const tta = document.createElement('textarea');
      tta.style.top = window.scrollY + 'px';
      tta.style.position = 'absolute';
      tta.style.opacity = '0';
      tta.readOnly = true;
      tta.value = code;
      document.body.append(tta);
      const selection = document.getSelection();
      const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
      tta.select();
      tta.setSelectionRange(0, code.length);
      tta.readOnly = false;
      const result = document.execCommand('copy');

      const copyIconDom = target.querySelector('i');
      const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content');

      if (result) {
        copyIconDom.className = 'fas fa-check';
        copyTooltipDom && (copyTooltipDom.innerHTML = copiedLang);
      } else {
        copyIconDom.className = 'fas fa-times';
      }

      tta.blur();
      target.blur();
      if (selected) {
        selection.removeAllRanges();
        selection.addRange(selected);
      }
      document.body.removeChild(tta);
    });

    copyDom.addEventListener('mouseleave', event => {
      setTimeout(() => {
        event.target.querySelector('i').className = 'fas fa-copy';
        const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content');
        copyTooltipDom && (copyTooltipDom.innerHTML = copyLang);
      }, 500);
    });

    let isFold = false
    targetFoldDom.addEventListener('click', event => {
      const target = event.currentTarget;
      const icon = target.querySelector('i');
      const foldTooltipDom = codeToolsBox.querySelector('.fold .tooltip-content');
      isFold = !isFold;
      if (isFold) {
        icon.className = foldedIconClassName;
        element.classList.add('folded');
        codeToolsBox.classList.add('folded');
        foldTooltipDom && (foldTooltipDom.innerHTML = foldedLang)
      } else {
        icon.className = 'fas fa-chevron-down';
        element.classList.remove('folded');
        codeToolsBox.classList.remove('folded');
        foldTooltipDom && (foldTooltipDom.innerHTML = foldLang)
      }
    });
  });
}