var codeBlockSelector = ".article--content pre";
var codeBlocks = $(codeBlockSelector);

var appendHTML = `
<div class="code-controls">
  <span class="code-controls-toggle"><span class='cf-icon More'></span></span>
  <ul class="code-control-options">
    <li class='copy-code'><span class='cf-icon Duplicate_New'></span> <span class="message">Copy</span></li>
    <li class='fullscreen-toggle'><span class='cf-icon ExpandB'></span> Fill window</li>
  </ul>
</div>
`

// Wrap all codeblocks with a new 'codeblock' div
$(codeBlocks).each(function() {
  $(this).wrap("<div class='codeblock'></div>");
});

// Append code controls to all codeblock divs
$('.codeblock').append(appendHTML);

//////////////////////////// CODE CONTROLS TOGGLING ////////////////////////////

// Click outside of the code-controls to close them
$(document).click(function() {
  $('.code-controls').removeClass('open')
});

// Click the code controls toggle to open code controls
$('.code-controls-toggle').click(function() {
  $(this).parent('.code-controls').toggleClass('open');
})

// Stop event propagation for clicks inside of the code-controls div
$('.code-controls').click(function(e) {
  e.stopPropagation();
});

/////////////////////////////// COPY TO CLIPBOARD //////////////////////////////

// Update button text during lifecycles
function updateText(element, currentText, newText) {
  let inner = (element)[0].innerHTML;
  inner = inner.replace(currentText, newText)
  
  element[0].innerHTML = inner
}

// Trigger copy success state lifecycle
function copyLifeCycle(element, state) {
  let stateData = ((state === 'success') ? {state: 'success', message: 'Copied!'} : {state: 'failed', message: 'Copy failed!'})

  updateText(element, 'Copy', stateData.message)
  element.addClass(stateData.state)

  setTimeout(function() {
    updateText(element, stateData.message, 'Copy');
    element.removeClass(stateData.state)
  }, 2500)
}

// Trigger copy failure state lifecycle

$('.copy-code').click(function() {
  let text = $(this).closest('.code-controls').prev('pre')[0].innerText

  const copyContent = async () => {
    try {
      await navigator.clipboard.writeText(text);
      copyLifeCycle($(this), 'success')
    } catch (err) {
      copyLifeCycle($(this), 'failed')
    }
  }

  copyContent()
})

/////////////////////////////// FULL WINDOW CODE ///////////////////////////////

/*
On click, open the fullscreen code modal and append a clone of the selected codeblock.
Disable scrolling on the body.
Disable user selection on everything but the fullscreen codeblock.
*/
$('.fullscreen-toggle').click(function() {
  var code = $(this).closest('.code-controls').prev('pre').clone();
  
  $('#fullscreen-code-placeholder').replaceWith(code[0]);
  $('body').css('overflow', 'hidden');
  $('body > div:not(.fullscreen-code)').css('user-select', 'none');
  $('.fullscreen-code').fadeIn();
})

/*
On click, close the fullscreen code block.
Reenable scrolling on the body.
Reenable user selection on everything.
Close the modal and replace the code block with the placeholder element.
*/
$('.fullscreen-close').click(function() {
  $('body').css('overflow', 'auto');
  $('body > div:not(.fullscreen-code)').css('user-select', '');
  $('.fullscreen-code').fadeOut();
  $('.fullscreen-code pre').replaceWith('<div id="fullscreen-code-placeholder"></div>')
});