import Swiper from 'swiper/swiper-bundle';
import {ScratchCard, SCRATCH_TYPE} from 'scratchcard-js'
require('./bootstrap');
require('@fancyapps/fancybox');

$(document).ready(function() {

  
  // BOUTON HAUT DE PAGE
  $(window).on('scroll',function(){
    if($(window).scrollTop()) {
        $('.pageup').addClass('see')
    }
    else {
        $('.pageup').removeClass('see')
    }
  })

  $('.toggle-menu').click(function() {
    $(this).toggleClass('active');
    $('nav').toggleClass('active');
    $('body').toggleClass('mobile-nav-active');
  })
  $('ul li a').click(function(){
    const body = document.querySelector('body');
    if (body.classList.contains('mobile-nav-active')) {
      $('.toggle-menu').toggleClass('active');
      $('nav').toggleClass('active');
      $('body').toggleClass('mobile-nav-active');
    }
  })
  // $('.close-menu').click(function(){
  //   $('nav').removeClass('active')
  //   $('li').siblings().removeClass('active')
  // })

  var mySwiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: true,
    autoplay: {
      delay: 3000,
    },
    pagination: {
      el: '.gift-bloc .swiper-pagination',
      type: 'bullets',
      clickable: true,
    },
  })

  // var scratch = new Scratch({
  //   canvasId: 'js-scratch-canvas',
  //   imageBackground: '../images/logo-footer.png',
  //   pictureOver: '../images/grattage.png',
  //   cursor: {
  //       png: 'piece.png',
  //       cur: 'piece.cur',
  //       x: '20',
  //       y: '17'
  //   },
  //   radius: 20,
  //   nPoints: 100,
  //   percent: 50,
  //   callback: function () {
  //     alert('I am Callback.');
  //   },
  //   pointSize: { x: 3, y: 3}
  // });

  const scContainer = document.getElementById('js--sc--container')
  if (scContainer != null) {
    const scInfos = document.querySelector('.sc__infos');
    const sc = new ScratchCard('#js--sc--container', {
      scratchType: SCRATCH_TYPE.LINE,
      containerWidth: scContainer.offsetWidth,
      containerHeight: scContainer.offsetHeight,
      imageForwardSrc: '../images/grattage.png',
      imageBackgroundSrc: '',
      htmlBackground: '',
      clearZoneRadius: 50,
      nPoints: 30,
      pointSize: 8,
      callback: function () {
        // alert('Now the window will reload !')
        // window.location.reload()
        $(".congratulate .main--bloc").css('display', 'block');
        $(".sc__wrapper").hide();
      }
    })

    // Init
    sc.init().then(() => {
      // sc.canvas.addEventListener('scratch.move', () => {
      //   let percent = sc.getPercent().toFixed(0);
      //   scInfos.innerHTML = percent + '%';
      //   console.log(percent)
      // })
    }).catch((error) => {
      // image not loaded
      alert(error.message);
    });
  }

  // const scContainer = document.getElementById('js--sc--container')
  // const sc = new ScratchCard('#js--sc--container', {
  //   scratchType: SCRATCH_TYPE.SPRAY,
  //   containerWidth: scContainer.offsetWidth,
  //   containerHeight: scContainer.offsetHeight,
  //   imageForwardSrc: './assets/images/grattage.png',
  //   imageBackgroundSrc: './assets/images/logo-footer.png',
  //   htmlBackground: '<h1 class="post-title">Grattez et<br>découvrez votre gain</h1>',
  //   clearZoneRadius: 50,
  //   nPoints: 30,
  //   pointSize: 8,
  //   callback: function () {
  //     // alert('Now the window will reload !')
  //     // window.location.reload()
  //     $(".congratulate .main--bloc").css('display', 'block');
	// 		$("#js--sc--container").hide();
  //   }
  // })
  
  // // Init
  // sc.init().then(() => {
  //   sc.canvas.addEventListener('scratch.move', () => {
  //     let percent = sc.getPercent().toFixed(2)
  //     console.log(percent)
  //   })
  // }).catch((error) => {
  //   // image not loaded
  //   alert(error.message);
  // });

  function CompteARebours(){

    // DECLARATION
    var date_actuelle = new Date(); // On déclare la date d'aujourd'hui
    var annee = 2021;
    var mois = 3;
    var jour = 15;

    var date_ouverture = new Date(annee, mois-1, jour, 0, 0, 0); // On déclare la date, attention mois -1
    var tps_restant = date_ouverture.getTime() - date_actuelle.getTime(); // Temps restant en millisecondes

    // CONVERSIONS
    var s_restantes = tps_restant / 1000; // On convertit en secondes
    var i_restantes = s_restantes / 60;
    var H_restantes = i_restantes / 60;
    var d_restants = H_restantes / 24;
    var hours = H_restantes % 24;
    var min = Math.floor((hours % 1)*60);
    hours = Math.floor(hours);
    d_restants = Math.floor(d_restants); // Jours restants
    if(d_restants < 10) {
      d_restants = '0'+d_restants;
    }
    if(hours < 10) {
      hours = '0'+hours;
    }
    if(min < 10) {
      min = '0'+min;
    }
    // AFFICHAGE
    $(".compteur .jours span").html(d_restants);
    $(".compteur .heures span").html(hours);
    $(".compteur .minutes span").html(min);

  }
  CompteARebours();

})