// copy to cliboard https://codepen.io/harshh9/pen/mdKVXgP
function CopyToClipboard(value, showNotification, notificationText) {
  var $temp = $("<textarea>");
  $("body").append($temp);
  $temp.val(value).select();
  document.execCommand("copy");
  $temp.remove();

  if (typeof showNotification === "undefined") {
    showNotification = true;
  }
  if (typeof notificationText === "undefined") {
    notificationText = "Copied to clipboard";
  }

  var notificationTag = $("div.copy-notification");
  if (showNotification && notificationTag.length == 0) {
    notificationTag = $("<div/>", {
      class: "copy-notification",
      text: notificationText,
    });
    $("body").append(notificationTag);

    notificationTag.fadeIn("speed", function () {
      setTimeout(function () {
        notificationTag.fadeOut("slow", function () {
          notificationTag.remove();
        });
      }, 2000);
    });
  }
}

function copy_css_html(wrapper) {
  var text = "";
  $(wrapper)
    .find("code")
    .each(function () {
      let iscss = $(this).hasClass("language-css") ? true : false;
      if (iscss) {

        let meta_infos = $("#test_titre").text().replace(" ", "_").toUpperCase() + " " +
                         $("#progress_nums").text().replace(" sur ", "/")+ " _ ";

        text += $(this).attr("id")
          ? "<!-- " + meta_infos + $(this).attr("data-num_css") + " -- "
          : "<!-- " + meta_infos + $("#question_title").text().replace(" ", "_") + " -->\n\n";
        text += $(this).attr("id") ? $(this).attr("id") + " -->\n\n" : "";
        text += "<style>\n";
      }
      text += $(this).text();
      if (iscss) {
        text += "\n</style>\n\n\n";
      }
    });
  CopyToClipboard(text, true, "Copié !");
}

/// WRAP CSS+HTML code
$(document).ready(function () {
  $('[data-type$="language-css"]').each(function () {
    let code_id = $(this).find("code").attr("id");
    let num_css = $(this).find("code").attr("data-num_css");

    // let code_id_fix = code_id ? code_id : "css_"+num_css;
    // let id_link ="<div class='wrap_anchor_link'>" + num_css +" -- <a class='anchor_link' href='#" + code_id_fix + 
    //   "'>#" + code_id_fix +
    //   "</a></div>";
    // $(this).prepend(id_link);

    var $next = $(this).next('[data-type$="language-markup"]');
    if ($next.length) {
      $(this).add($next).wrapAll('<div class="wrap_css_html">');
    // } else {
      // alert("no nexts")
    }

    if (!code_id) {
      console.log("-_____ PAS DE ID _____- CSS num " + num_css);
    }
  });

  /// COPY BUTTON
  $(".wrap_css_html").each(function () {
    var $parent = $(this);
    if ($(".wrap_css_html_button")) { $(".wrap_css_html_button").remove() }

    var $button = $("<button class='wrap_css_html_button'>COPY</button>");
    $button.on("click", function () {
      copy_css_html($parent);
    });
    $parent.prepend($button);

    /// REMOVE id (code), set to wraper
    let code_id = $(this).find("code").attr("id");
    let num_css = $(this).find("code").attr("data-num_css");
    let code_id_fix = code_id ? code_id : num_css;
    $parent.attr("id", code_id_fix);
    $(this).find("code").removeAttr("id");
  });


  document.querySelectorAll('.fullscreen_button').forEach(button => {
      button.addEventListener('click', () => {
          // Crée un bouton "Quitter le plein écran" dynamiquement
          let exitButton = document.querySelector('.exit-fullscreen');
          if (!exitButton) {
              exitButton = document.createElement('button');
              exitButton.className = 'exit-fullscreen';
              exitButton.textContent = 'Quitter le plein écran';
              exitButton.onclick = exitbut;
              document.body.appendChild(exitButton);
          }

          // Trouve l'élément parent ou le <pre> cible
          const parentElement = button.parentElement;
          const targetElement = parentElement.nextElementSibling;
          const tarElement = parentElement.nextElementSibling.nextElementSibling;

          if (tarElement && tarElement.className === 'code-toolbar') {
              tarElement.classList.toggle('fullscreen-mode');
              // alert("2 tarElement == "+tarElement.className)
              // Affiche ou masque le bouton "Quitter le plein écran"
              if (tarElement.classList.contains('fullscreen-mode')) {
                  exitButton.classList.add('visible');
              } else {
                  exitButton.classList.remove('visible');
              }
          }
      });
  });


  // Fonction pour quitter le mode plein écran
  function exitbut() {
      const fullscreenElement = document.querySelector('.fullscreen-mode');
      const exitButton = document.querySelector('.exit-fullscreen');
      if (fullscreenElement) {
          fullscreenElement.classList.remove('fullscreen-mode');
          exitButton.classList.remove('visible');
      }
  }
  function scrollToTop() {
    window.scrollTo(0, 0); // Méthode native immédiate
    document.body.scrollTop = 0; // Safari, anciens navigateurs
    document.documentElement.scrollTop = 0; // Chrome, Firefox, IE, Opera
  }

  setTimeout(() => {
    $('html, body').scrollTop($("#root").offset().top);
  },0);

});