var globalColor='#000000';
var currentLink='';
var apiURL='https://qrcode-facile.fr/rest/';
var urlWebsite='https://qrcode-facile.fr/';
var currentID='';
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)
{
  var url = urlLink;
  var valid = /^(ftp|http|https):\/\/[^ "]+$/.test(url);
  if(!valid)
  {
    $('.alertURL').removeAttr('hidden');
  }
  else {
    $('.alertURL').attr('hidden','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 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()
{
  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);
      }
    });
  }
  /*
  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('http://qrcode-facile.fr/');
  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;
      changeLinkQR(currentLink);
    });
    document.querySelector('#phoneNumber').addEventListener('input', function(el) {
      currentLink='tel:' + document.querySelector('#phoneNumber').value;
      changeLinkQR(currentLink);
    });
    document.querySelector('#urlFacebook').addEventListener('input', function(el) {
      currentLink=document.querySelector('#urlFacebook').value;
      changeLinkQR(currentLink);
    });
    document.querySelector('#urlInsta').addEventListener('input', function(el) {
      currentLink=document.querySelector('#urlInsta').value;
      currentLink=currentLink.replace('@', '');
      currentLink='https://instagram.com/' + currentLink;
      changeLinkQR(currentLink);
    });
    document.querySelector('#urlTik').addEventListener('input', function(el) {
      currentLink=document.querySelector('#urlTik').value;
      currentLink=currentLink.replace('@', '');
      currentLink='https://www.tiktok.com/@' + currentLink;
      changeLinkQR(currentLink);
    });
    document.querySelector('#urlLinkedin').addEventListener('input', function(el) {
      currentLink=document.querySelector('#urlLinkedin').value;
      changeLinkQR(currentLink);
    });
    document.querySelector('#urlLink').addEventListener('input', function(el) {
      currentLink=document.querySelector('#urlLink').value;
      changeLinkQR(currentLink);
    });
    document.querySelector('#urlFacebook').addEventListener('input', function(el) {
      currentLink=document.querySelector('#urlFacebook').value;
      changeLinkQR(currentLink);
    });
    document.querySelector('#urlInsta').addEventListener('input', function(el) {
      currentLink=document.querySelector('#urlInsta').value;
      currentLink=currentLink.replace('@', '');
      currentLink='https://instagram.com/' + currentLink;
      changeLinkQR(currentLink);
    });
    document.querySelector('#urlTik').addEventListener('input', function(el) {
      currentLink=document.querySelector('#urlTik').value;
      currentLink=currentLink.replace('@', '');
      currentLink='https://www.tiktok.com/@' + currentLink;
      changeLinkQR(currentLink);
    });
    document.querySelector('#urlLinkedin').addEventListener('input', function(el) {
      currentLink=document.querySelector('#urlLinkedin').value;
      changeLinkQR(currentLink);
    });
    $('.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);
  }
}