var globalColor = '#000000';
var currentLink = '';
var apiURL = 'https://qrcode-facile.fr/rest/';
var urlWebsite = 'https://qrcode-facile.fr/';
var currentID = '';

let totalHeight=0;
let isValidURL=false;
let rangeDateAnalytics=false;
const saveDateRange = (selectedDates) => {
  rangeDateAnalytics=selectedDates;
  return selectedDates;
}
document.addEventListener('DOMContentLoaded', () => {
  if(document.querySelectorAll('#calendar').length>0) {
    let today = new Date();
    let formattedToday=today.toISOString().split('T')[0];
    let todayJ7=new Date();
    todayJ7.setDate(todayJ7.getDate()-7);
    let formattedTodayJ7=todayJ7.toISOString().split('T')[0];
    console.error(formattedToday + '-' + formattedTodayJ7);
    const options = {
      type: 'multiple',
      months: 2,
      jumpMonths: 2,
      actions: {
        clickDay(event, self) {
          saveDateRange(self.selectedDates);
        },
      },
      settings: {
        lang: 'fr-FR',
        range: {
          disablePast: false,
        },
        selection: {
          day: 'multiple-ranged',
        },
        selected: {
          dates: [formattedTodayJ7 + '-' + formattedToday],
          year: today.getFullYear(),
        },
        visibility: {
          daysOutside: false,
          theme: 'light',
          weekend: false,
          today: false
        },
      },
    };
    
    const calendar = new VanillaCalendar('#calendar', options);
    calendar.init();
    document.querySelector('#btnShowStats').addEventListener('click', () => {
      NProgress.start() 
      if(rangeDateAnalytics) {
        try {
          fetch(apiURL + 'analytics', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ rangeDate: rangeDateAnalytics })
          }).then(response => response.json()).then(data => {
            console.log(data);
            labels = data.labels;
  
            data = {
              labels: labels,
              datasets: data.datasets
            };
  
            config.data=data;
            myChart.update();
            NProgress.done();
            let totalFlash=0;
            data.datasets.forEach((el) => {
              totalFlash+=el.data.reduce((a, b) => a + b, 0);
            });
            document.querySelector('#totalFlashs').innerHTML=totalFlash;
            document.querySelector('#range-text').innerHTML=(rangeDateAnalytics.length==1) ? 'sur 1 jour' : `sur ${rangeDateAnalytics.length} jours`;
          });
        } catch (error) {
          alert('Une erreur est survenue, veuillez réessayer plus tard.');
          console.error(error);
        }
      }
    });
  }
  
  let headers = document.querySelectorAll('.navbar-expand-md');
  headers.forEach((el) => { 
    totalHeight+=el.offsetHeight;
  });
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  });

});
document.addEventListener('scroll', () => {
  if(window.scrollY>totalHeight)
  {
    document.body.classList.add('nav-hide');
  }
  else
  {
    document.body.classList.remove('nav-hide');
  }
});
function changeColor(colorC) {
  globalColor = colorC;
  qr._options.dotsOptions.color = colorC;
  qr.update();
  document.querySelector('#colorSwatch').value = colorC;
  document.querySelector('.clr-field').style.color = colorC;
}
function changeSizeLogo(valSize) {
  valSize = parseInt(valSize);
  qr._options.imageOptions.margin = valSize;
  qr.update();
}
function deleteImage() {
  qr._options.image = '';
  qr.update();
  document.querySelector('.logoTemV').style.display = 'none';
}
function getDataImage(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      console.log(e.target.result);
      qr._options.image = e.target.result;
      document.getElementById('logoTempVal').src = e.target.result;
      document.querySelector('.logoTemV').style.display = 'inline-block';
      qr.update();
    };
    reader.readAsDataURL(input.files[0]);
  }
}
function changeStyleQR(qr_this) {
  qr._options.cornersSquareOptions = 'dot';
  $('.typeQR li').removeClass('selectedStyle');
  $(qr_this).addClass('selectedStyle');
  switch (qr_this.getAttribute('data-attr')) {
    case "square":
      qr._options.dotsOptions.type = 'square';
      break;
    case "extra-rounded":
      qr._options.dotsOptions.type = 'extra-rounded';

      break;
    case "dots":
      qr._options.dotsOptions.type = 'dots';
      break;
    case "matrix":
      qr._options.dotsOptions.type = 'rounded';
      qr._options.cornersSquareOptions = { type: 'dot' };
      break;
    case "pastel":
      qr._options.dotsOptions.type = 'dot';
      qr._options.cornersSquareOptions = { type: 'extra-rounded' };
      break;
  }
  qr.update();
}
function changePredefined(qr_this) {
  $('.typeQR li').removeClass('selectedStyle');
  qr._options.cornersSquareOptions = 'dot';
  switch (qr_this.target.getAttribute('data-style')) {
    case "facebook":
      qr._options.dotsOptions.type = 'rounded';
      qr._options.cornersSquareOptions = { type: 'dot' };
      $('.typeQR li[data-attr="matrix"]').addClass('selectedStyle');
      changeColor('#3b579d');
      qr._options.image = 'https://qrcode-facile.fr//assets/examples/facebook_logo.png';
      document.getElementById('logoTempVal').src = 'https://qrcode-facile.fr//assets/examples/facebook_logo.png';
      document.querySelector('.logoTemV').style.display = 'inline-block';
      document.querySelector('.form-range').value = '12';
      changeSizeLogo(12);
      break;
    case "insta":
      qr._options.dotsOptions.type = 'extra-rounded';
      $('.typeQR li[data-attr="extra-rounded"]').addClass('selectedStyle');
      changeColor('#862c63');
      qr._options.image = 'https://qrcode-facile.fr//assets/examples/insta_logo.png';
      document.getElementById('logoTempVal').src = 'https://qrcode-facile.fr//assets/examples/insta_logo.png';
      document.querySelector('.logoTemV').style.display = 'inline-block';
      document.querySelector('.form-range').value = '8';
      changeSizeLogo(8);
      break;
    case "linkedin":
      qr._options.dotsOptions.type = 'extra-rounded';
      $('.typeQR li[data-attr="extra-rounded"]').addClass('selectedStyle');
      changeColor('#0274b3');
      qr._options.image = 'https://qrcode-facile.fr//assets/examples/linkedin_logo.png';
      document.getElementById('logoTempVal').src = 'https://qrcode-facile.fr//assets/examples/linkedin_logo.png';
      document.querySelector('.logoTemV').style.display = 'inline-block';
      document.querySelector('.form-range').value = '8';
      changeSizeLogo(8);
      break;
    case "twitter":
      qr._options.dotsOptions.type = 'extra-rounded';
      $('.typeQR li[data-attr="extra-rounded"]').addClass('selectedStyle');
      changeColor('#179cf0');
      qr._options.image = 'https://qrcode-facile.fr//assets/examples/twitter_logo.png';
      document.getElementById('logoTempVal').src = 'https://qrcode-facile.fr//assets/examples/twitter_logo.png';
      document.querySelector('.logoTemV').style.display = 'inline-block';
      document.querySelector('.form-range').value = '8';
      changeSizeLogo(4);
      break;
    case "website":
      qr._options.dotsOptions.type = 'dot';
      qr._options.cornersSquareOptions = { type: 'extra-rounded' };
      $('.typeQR li[data-attr="pastel"]').addClass('selectedStyle');
      changeColor('#fe5035');
      qr._options.image = 'https://qrcode-facile.fr//assets/examples/website_logo.png';
      document.getElementById('logoTempVal').src = 'https://qrcode-facile.fr//assets/examples/website_logo.png';
      document.querySelector('.logoTemV').style.display = 'inline-block';
      document.querySelector('.form-range').value = '8';
      changeSizeLogo(4);
      break;
    case "default":
      deleteImage();
      qr._options.dotsOptions.type = 'extra-rounded';
      $('.typeQR li[data-attr="extra-rounded"]').addClass('selectedStyle');
      changeColor('#1e4f4a');
      document.querySelector('.form-range').value = '8';
      changeSizeLogo(8);
      break;
  }
  qr.update();
}
function changeLinkQR(urlLink) {
  document.querySelector('.alertPost').setAttribute('hidden', '');
  var url = urlLink;
  var valid = /^(ftp|http|https):\/\/[^ "]+$/.test(url);
  if (!valid) {
    $('.alertURL').removeAttr('hidden');
    isValidURL=false;
  }
  else {
    $('.alertURL').attr('hidden', 'true');
    isValidURL=true;
  }
  $.post(apiURL + 'create-qr-code', { urlQRTemp: urlLink }).done(function (data) {
    qr._options.data = urlWebsite + 'redirect/' + data;
    qr.update();
    currentLink = urlWebsite + 'redirect/' + data;
    currentID = data;
  });
}
function createQRCodeMenu(urlMenu) {
  $('#createQRBtn').attr('hidden', 'true');
  $.post(apiURL + 'create-qr-code-menu', { urlQRTemp: urlMenu }).done(function (data, qr) {
    // qr.set({
    //  value: urlWebsite + 'redirect/' + data
    // });
    changeLinkQR(urlWebsite + 'redirect/' + data);
    currentLink = urlWebsite + 'redirect/' + data;
    currentID = data;
    var qrCodeExport = document.querySelector('#qrcode canvas').toDataURL('image/png', 1.0);
    $.post(apiURL + 'publishQR', { QRCodeData: qrCodeExport }).done(function (data) {
      $('#qrcodeContainer').removeAttr('hidden');
    });
  });
}

function debounce(func, timeout = 300) {
  console.log('Debunce');
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
function transparencyPNG(el) {
  if (el.checked) {
    qr._options.backgroundOptions.color = 'rgba(0,0,0,0)';
    qr.update();
  }
  else {
    qr._options.backgroundOptions.color = 'rgba(255,255,255,1)';
    qr.update();
  }
}
// function checkCodePromo()
// {
//   let promoT=document.getElementById('promoT').value;
//   $.post(apiURL + 'promo', { promoCode: promoT }).done(function( data ) {
//     let resultCode=JSON.parse(data);
//     if(resultCode.code!='invalid')
//     {
//       let discount=parseInt(resultCode.discount);
//       let priceAct=document.getElementById('priceAct');
//       let price=document.getElementById('price').value;
//       price=price.replace(',', '.');
//       price=parseFloat(price);
//       let newprice=price-(price*discount/100);
//       let stPrice=newprice*100;
//       stPrice=stPrice.toFixed(0);
//       console.log('Strip price :', stPrice);
//       newprice=newprice.toFixed(2);
//       newprice=newprice.replace('.', ',');
//       priceAct.innerHTML=newprice;
//       document.getElementById('alertResultPromo').innerHTML='<div class="alert alert-success p-3">Code promotion appliqué ! ✅</div>';
//     }
//     else
//     {
//       document.getElementById('alertResultPromo').innerHTML='<div class="alert alert-warning p-3">Code promotion invalide 🤔</div>';
//     }
//   });
// }
// Cook utils
function setCookie(e, t, n) { var o, i = ""; n && ((o = new Date).setTime(o.getTime() + 24 * n * 60 * 60 * 1e3), i = "; expires=" + o.toUTCString()), document.cookie = e + "=" + (t || "") + i + "; path=/" } function getCookie(e) { for (var t = e + "=", n = document.cookie.split(";"), o = 0; o < n.length; o++) { for (var i = n[o]; " " == i.charAt(0);)i = i.substring(1, i.length); if (0 == i.indexOf(t)) return i.substring(t.length, i.length) } return null } function eraseCookie(e) { document.cookie = e + "=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;" }

function publishNoteDoc(contentEdit) {
  console.log(contentEdit);
  console.warn('token', document.getElementById('documentToken').value);
  let tokenDoc = document.getElementById('documentToken').value;
  $.post(apiURL + 'create-qr-doc', { contentDoc: contentEdit, idDoc: tokenDoc }).done(function (data) {
    qr._options.data = urlWebsite + 'redirect/' + data;
    qr.update();
    currentLink = urlWebsite + 'redirect/' + data;
    currentID = data;
  });
}
function proChecker() {
  return false;
  if (document.querySelector('.typeQR li.selectedStyle').getAttribute('data-attr') != 'square' || document.querySelector('.logoTemV').style.display == 'inline-block' || document.querySelector('.activeL').getAttribute('data-id') == "fileContainer" || currentLink.indexOf('doc_') != '-1') {
    document.getElementById('bottom-bar-alert').classList.add('openEndAlert');
    document.getElementById('alert-pro').classList.add('show');
  }
  else {
    document.getElementById('bottom-bar-alert').classList.remove('openEndAlert');
    document.getElementById('alert-pro').classList.remove('show');
  }
}
function postQRCode() {
  // Checking if QR Code is valid before posting
  let typeData=document.querySelector('.activeL').getAttribute('data-id');
  let validQR=true;
  switch(typeData) {
    case "linkContainer":
      if(!isValidURL) {
        validQR=false;
      }
    break;
    case "telContainer":
      if(document.querySelector('#phoneNumber').value.length==0) {
        validQR=false;
      }
    break;
    case "instaContainer":
      if(document.querySelector('#urlInsta').value.length==0) {
        validQR=false;
      }
    break;
    case "faceContainer":
      if(document.querySelector('#urlFacebook').value.length==0) {
        validQR=false;
      }
    break;
    case "linkedinContainer":
      if(document.querySelector('#urlLinkedin').value.length==0) {
        validQR=false;
      }
    break;
    case "tikContainer":
      if(document.querySelector('#urlTik').value.length==0) {
        validQR=false;
      }
    break;
  }
  if(!validQR) {
    document.querySelector('.alertPost').removeAttribute('hidden');
    return;
  } else {
    document.querySelector('.alertPost').setAttribute('hidden', '');
  }
  document.body.style.opacity = '0.5';
  fullQuality = document.querySelector('#qrcode canvas').toDataURL('image/png', 1.0);
  document.getElementById('tempQRCode').value = fullQuality;
  document.getElementById('tempIDQR').value = currentID;
  if (document.querySelector('.typeQR li.selectedStyle').getAttribute('data-attr') != 'square') {
    document.getElementById('pQld').value = '0';
  }
  if (document.querySelector('.logoTemV').style.display == 'inline-block') {
    document.getElementById('pQld').value = '0';
  }
  if (document.querySelector('.activeL').getAttribute('data-id') == "fileContainer") {
    document.getElementById('pQld').value = '0';
  }
  if (currentLink.indexOf('doc_') != '-1') {
    document.getElementById('pQld').value = '0';
  }
  document.querySelector('form').submit();
}
let qr;
if (document.getElementById('qrcode')) {
  if (document.querySelectorAll('#dropzone').length > 0) {
    let myDropzone = new Dropzone("div#dropzone", {
      url: "https://qrcode-facile.fr//rest/upload-file",
      maxFiles: 1,
      maxFilesize: 26214400,
      acceptedFiles: "image/jpeg,image/png,image/gif,application/epub+zip,text/calendar,application/vnd.oasis.opendocument.presentation,application/vnd.oasis.opendocument.spreadsheet,application/vnd.oasis.opendocument.text,audio/ogg,application/pdf,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,image/svg+xml,font/ttf,text/plain,audio/wav,audio/webm,image/webp,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/zip",
      maxfilesexceeded: function (file) {
        this.removeAllFiles();
        this.addFile(file);
      }
    });
    myDropzone.on("success", function (file, responseText) {
      changeLinkQR(responseText);
    });
    myDropzone.on('complete', file => {
      if (!getCookie('uploadForm')) {
        introJs().setOptions({
          'skipLabel': 'x',
          showProgress: true,
          showBullets: false,
          'prevLabel': 'Précédent',
          'nextLabel': 'Suivant',
          'doneLabel': 'Terminé',
          steps: [{
            intro: "Votre fichier vient d'être uploadé, il est maintenant contenu directement dans ce QR Code ✨",
            element: document.querySelector('#qrcode'),
          }, {
            element: document.querySelector('.optionQR'),
            intro: "Personnalisez ensuite tous les aspects de votre QR, et passez au téléchargement !"
          }]
        }).start();
        setCookie("uploadForm", 1, 60);
      }
    });
  }
  gtag('event', 'open_builder_qrsimple', { });
  /*
  var qrcode = new QRCode("qrcode", {
      text: "http://qrcode-facile.fr/",
      width: 900,
      height: 900,
      colorDark : globalColor,
      colorLight : "#ffffff",
      correctLevel : QRCode.CorrectLevel.H
  }); */
  /* var qr = new QRious({ element: document.getElementById('qrcode') });
  qr.set({
  background: 'white',
  backgroundAlpha: 1,
  foreground: 'black',
  foregroundAlpha: 1,
  level: 'H',
  padding: 40,
  size: 700,
  value: 'https://qrcode-facile.fr/'
  }); */
  qr = new QRCodeStyling({
    width: 300,
    height: 300,
    type: "canvas",
    data: "https://qrcode-facile.fr/",
    dotsOptions: {
      color: "red"
    },
    backgroundOptions: {
      color: "#e9ebee",
    },
    imageOptions: {
      crossOrigin: "anonymous",
      margin: 20
    }
  });
  console.log('QR Code loaded');
  qr.append(document.getElementById("qrcode"));
  changeLinkQR('#');
  Coloris({
    wrap: true,
    theme: 'polaroid',
    swatchesOnly: true,
    themeMode: 'dark',
    margin: 2,
    format: 'hex',
    formatToggle: false,
    alpha: false,
    forceAlpha: false,
    swatchesOnly: false,
    focusInput: true,
    selectInput: false,
    clearButton: true,
    clearLabel: 'RAZ',
    swatches: [
      '#264653',
      '#2a9d8f',
      '#e9c46a',
      'rgb(244,162,97)',
      '#e76f51',
      '#d62828',
      'navy',
      '#07b',
      '#0096c7',
      '#00b4d880',
      'rgba(0,119,182,0.8)'
    ],
    inline: false,
    defaultColor: '#000000'
  });
  if (document.querySelector('#urlLink')) {
    document.addEventListener('coloris:pick', event => {
      changeColor(event.detail.color);
    });
    $('.predefinedQR img').on('click', changePredefined);
    document.querySelector('#urlLink').addEventListener('input', function (el) {
      currentLink = document.querySelector('#urlLink').value;
      debounce(changeLinkQR(currentLink), 600);
    });
    document.querySelector('#phoneNumber').addEventListener('input', function (el) {
      currentLink = 'tel:' + document.querySelector('#phoneNumber').value;
      debounce(changeLinkQR(currentLink), 600);
    });
    document.querySelector('#urlFacebook').addEventListener('input', function (el) {
      currentLink = document.querySelector('#urlFacebook').value;
      debounce(changeLinkQR(currentLink), 600);
    });
    document.querySelector('#urlInsta').addEventListener('input', function (el) {
      currentLink = document.querySelector('#urlInsta').value;
      currentLink = currentLink.replace('@', '');
      currentLink = 'https://instagram.com/' + currentLink;
      debounce(changeLinkQR(currentLink), 600);
    });
    document.querySelector('#urlTik').addEventListener('input', function (el) {
      currentLink = document.querySelector('#urlTik').value;
      currentLink = currentLink.replace('@', '');
      currentLink = 'https://www.tiktok.com/@' + currentLink;
      debounce(changeLinkQR(currentLink), 600);
    });
    document.querySelector('#urlLinkedin').addEventListener('input', function (el) {
      currentLink = document.querySelector('#urlLinkedin').value;
      debounce(changeLinkQR(currentLink), 600);
    });
    document.querySelector('#urlLink').addEventListener('input', function (el) {
      currentLink = document.querySelector('#urlLink').value;
      debounce(changeLinkQR(currentLink), 600);
    });
    document.querySelector('#urlFacebook').addEventListener('input', function (el) {
      currentLink = document.querySelector('#urlFacebook').value;
      debounce(changeLinkQR(currentLink), 600);
    });
    document.querySelector('#urlInsta').addEventListener('input', function (el) {
      currentLink = document.querySelector('#urlInsta').value;
      currentLink = currentLink.replace('@', '');
      currentLink = 'https://instagram.com/' + currentLink;
      debounce(changeLinkQR(currentLink), 600);
    });
    document.querySelector('#urlTik').addEventListener('input', function (el) {
      currentLink = document.querySelector('#urlTik').value;
      currentLink = currentLink.replace('@', '');
      currentLink = 'https://www.tiktok.com/@' + currentLink;
      debounce(changeLinkQR(currentLink), 600);
    });
    document.querySelector('#urlLinkedin').addEventListener('input', function (el) {
      currentLink = document.querySelector('#urlLinkedin').value;
      debounce(changeLinkQR(currentLink), 600);
    });
    $('.selectorSoft li').click(function (el) {
      $('.selectorSoft li').removeClass('activeL');
      $('.toolbox').removeClass('activeToolbox');
      el.currentTarget.classList.add('activeL');
      document.querySelector('#' + el.currentTarget.getAttribute('data-id')).classList.add('activeToolbox');
    });
    $('.commonColors li span').click(function (el) {
      changeColor(getComputedStyle(el.currentTarget)['backgroundColor']);
    });
    $(document).ready(function () {
      $('#documentContent').summernote({
        placeholder: '',
        tabsize: 2,
        height: 450,
        lang: 'fr-FR',
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'italic', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['insert', ['link', 'picture']],
        ],
        callbacks: {
          onChange: function (contents, $editable) {
            publishNoteDoc(contents);
          }
        }
      });
      $('#documentContent').on('change', function (el) {
        console.log('hiiiii');
      });
    });
    if (!getCookie('stepByStep')) {
      introJs().setOptions({
        'skipLabel': 'x',
        showProgress: true,
        showBullets: false,
        'prevLabel': 'Précédent',
        'nextLabel': 'Suivant',
        'doneLabel': 'Terminé',
        steps: [{
          intro: "Bienvenue sur QR Code Facile ! Découvrez les <b>3 étapes pour tout comprendre 🚀</b>"
        }, {
          element: document.querySelector('.selectorSoft'),
          intro: "Sélectionnez ici le type de QR Code que vous souhaitez créer ! Par défaut <b>\"Lien\"</b> devrait vous convenir !"
        },
        {
          element: document.querySelector('#urlLink'),
          intro: "Renseignez-ici l'adresse du site Web que contiendra le QR Code, un simple copier-coller fait le job ✅"
        },
        {
          element: document.querySelector('.optionQR'),
          intro: "Avant-dernière étape, personnalisez votre QR Code à votre goût, en changeant sa couleur par exemple, et c'est terminé !"
        },
        {
          element: document.querySelector('.optionQR .btn-primary'),
          intro: "Cliquez maintenant simplement sur le bouton je télécharge mon QR Code 🎊"
        }]
      }).start();
      setCookie("stepByStep", 1, 60);
    }
    let proCheckerNode = document.querySelector("#qrcode");
    let config = { attributes: true, childList: true, subtree: true };
    let observer = new MutationObserver(proChecker);
    observer.observe(proCheckerNode, config);
  }
}