import { createApp } from 'vue'
import '../scss/main.scss'
import Content from './vuejs/Content.vue'

import REST from './api/rest-axios'

// import LocomotiveScroll from 'locomotive-scroll';
// const scroll = new LocomotiveScroll();

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { ScrollSmoother } from "gsap/ScrollSmoother";
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

// /**
//  * @file
//  * reha behaviors.
//  * https://www.drupal.org/docs/drupal-apis/javascript-api/javascript-api-overview
//  */
// (function (Drupal) {

//   'use strict';

//   Drupal.behaviors.reha = {
//     attach: function (context, settings) {
//       console.log('It works!');
//     }
//   };

// } (Drupal));

(function (Drupal, drupalSettings) {
  const MathalloTheme = function () {
    const _is_front = drupalSettings.path.isFront
    console.log('drupalSettings', drupalSettings)

    // let _I18n

    //  ___      _ _
    // |_ _|_ _ (_) |_
    //  | || ' \| |  _|
    // |___|_||_|_|\__|
    function init () {
      console.log('MathalloTheme init()')
      initBgAnime()
      initVues()
    }

    function initBgAnime(){
      // gsap.to('body', {
      //   scrollTrigger: 'main[role="main"]', // start animation when ".box" enters the viewport
      //   backgroundPositionY: 10
      // });
      ScrollSmoother.create({
        smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
        effects: true, // looks for data-speed and data-lag attributes on elements
        smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
        wrapper: 'main[role="main"]',
        content: 'main[role="main"]>.layout-content'
      });
    }

    function initVues(){
      console.log('initVues');
      
      // initVueContent();


    }

    function initVueContent(){
      createApp(Content).mount('main[role="main"]');

      // processEtapeLinks();
    }


    // function onClickEtapeLink(e){
    //   e.preventDefault();
      
    //   let a = e.currentTarget;
    //   let nid = a.dataset.nodeNid;
    //   console.log(nid);

    //   getNodeData(nid);

    //   return null;
    // }


    // function processEtapeLinks(){
    //   let etape_link_fields = document.querySelectorAll('#etapes-liste div.views-field-title');
    //   etape_link_fields.forEach((field, index) => {
    //     let nid = null;
    //     let classList = field.classList;
    //     classList.forEach((classe) => {
    //       let reg = /data-node-(\d+)/;
    //       let result = classe.match(reg);
    //       if (result) {
    //         nid = result[1];
    //         console.log(nid);
    //       }
    //     })
        
    //     if (nid) {
    //       let a = field.querySelector('a');
    //       a.setAttribute('data-node-nid', nid);
    //       a.addEventListener('click', onClickEtapeLink);
    //     }
        
        
    //   })
    // }
    
    // function getNodeData(nid){
    //   const params = {
    //   }
    //   REST.get(`/node/${nid}?_format=json`, params)
    //   .then((data) => {
    //     console.log('user REST getUser data', data)
    //   })
    //   .catch(error => {
    //     console.warn('Issue with getNodedata', error)
    //     Promise.reject(error)
    //   })
    // }

    init()
  } // end MathalloTheme()

  MathalloTheme()
})(Drupal, drupalSettings)