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()')
      initBurgerMenu();
      initPartieFrontBackCardSwitch();
      initBgFormes();
      initBgAnime();
      // initVues()
    }

    function initBurgerMenu() {
      let header_right = document.getElementById('burger-btn');
      header_right.parentElement.addEventListener('click', function(e){
        // console.log('click header_right', this);
        this.firstElementChild.toggleAttribute('opened');
        this.firstElementChild.nextElementSibling.toggleAttribute('opened');
      })
    }

    function initPartieFrontBackCardSwitch() {
      let principes_pratique = document.getElementById('partie-principes-pratique');
      if (principes_pratique) {
        let cards = principes_pratique.getElementsByClassName('field-card');
        // console.log('cards', cards);
        for (const card of cards) {
          card.addEventListener('mousemove', function (e) {
            // console.log(this, e);
            for (const child of this.parentElement.children){
              child.classList.add('back-card')
              child.classList.remove('front-card');
            }
            this.classList.add('front-card')
            this.classList.remove('back-card')
          })
        }
      }
      
    }

    async function initBgFormes(){
      const container = document.querySelector('main[role="main"] > .layout-content > .wrapper');
      console.log('container', container);
      
      // liste forme file names
      const formesclasses = [
        'pyramide',
        'prct',
        'infinite',
        'pi',
        'supeg',
        'cone',
        'croissant',
        'cube',
        'diamant',
        'cylindre'
      ]

      // listes all available sizes
      let sizes = []
      let min = 150;
      let increment = Math.round((350 / (formesclasses.length -1)));
      for (let i = 0; i < formesclasses.length; i++) {
        sizes.push( min + increment * i)
      }
      console.log('sizes', sizes);

      let cards = document.querySelectorAll('.field-card, .node-type-chapitre, .node-type-partie');
      console.log('cards', cards);
      let used_n = [];
      for (const card of cards) {
        console.log('card', card);
        
        let forme = document.createElement('div');
        forme.classList.add('bg-forme');

        // random forme
        // avoid duplicated formes
        let n = Math.round(Math.random() * (formesclasses.length -1));
        while (used_n.includes(n)) {
          n = Math.round(Math.random() * (formesclasses.length -1));
        }
        used_n.push(n);
        console.log('n',n, 'class', formesclasses[n]);
        // forme.classList.add(formesclasses[n]);
        const response = await fetch(`/themes/custom/mathallo/assets/img/formes/${formesclasses[n]}.svg`)
        const svgText = await response.text();
        forme.innerHTML = svgText;
        const svgNode = forme.querySelector('svg');
        const init_wh = svgNode.getAttribute('width');

        // random size
        // let wh = 150 + Math.random()*350;

        // pic a size
        let wh = sizes.splice(Math.floor(Math.random() * sizes.length), 1)[0];

        forme.style.width = forme.style.height = `${wh}px`;
        svgNode.setAttribute('width', wh);
        svgNode.setAttribute('height', wh);

        // keep stroke width to visualy 1px
        let scale = wh / init_wh;
        const paths = svgNode.querySelectorAll('path, line, rect, circle, ellipse, polygon, polyline');
        console.log('paths', paths);
        
        paths.forEach(path => {
          const init_SW = parseFloat(path.getAttribute('stroke-width')) || 1;
          let new_SW = init_SW / scale;
          path.setAttribute('stroke-width', `${new_SW}px`);
          path.style.strokeWidth = `${new_SW}px`;
        });
        

        // random position
        // top
        let top = card.offsetTop + card.clientHeight/2 - wh/2;
        forme.style.top = `${top}px`;

        // left right
        if (card.classList.contains('field-principes-reflexion')) {
          // left
          forme.style.left = `${card.offsetLeft - wh}px`;
        } else if(card.classList.contains('field-en-pratique')) {
          // right
          forme.style.left = `${card.offsetLeft + card.clientWidth}px`;
        } else {
          // random
          forme.style.left = Math.random() > 0.5 ? `${card.offsetLeft - wh}px` : `${card.offsetLeft + card.clientWidth}px`;
        }
        

        container.prepend(forme);
      }
    }

    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)