import gsap from 'gsap';
import { Swiper } from 'swiper';

import { animateStep1, animateStep2, animateStep3, animateStep4 } from '$utils/animation';
import GravityFalls from '$utils/gravity';
import { MainScroll } from '$utils/lenis';
window.Webflow ||= [];

window.document.addEventListener(
  'DOMContentLoaded',
  // script is pushed twice j'hack comme ça on verra plus tard
  function () {
    const currentLocation = window.location;
    if (
      (currentLocation.hostname === 'thelawofeffect.ca' ||
        currentLocation.hostname === 'thelawofeffect.com') &&
      currentLocation.pathname === '/'
    ) {
      window.location.href = 'https://' + currentLocation.hostname + '/en';
    } else if (
      currentLocation.hostname === 'loideleffet.info' &&
      currentLocation.pathname === '/'
    ) {
      window.location.href = 'https://' + currentLocation.hostname + '/fr';
    }
    window!.Webflow!.push(() => {
      if (currentLocation.pathname === '/en') {
        document.getElementById('footer-lang-en')?.classList.add('lang-active');
      } else {
        document.getElementById('footer-lang-fr')?.classList.add('lang-active');
      }
      let stepForm = 0;
      const appHeight = () => {
        const doc = document.documentElement;
        doc.style.setProperty('--vh', `${window.innerHeight}px`);
      };
      window.addEventListener('resize', appHeight);
      appHeight();
      const fallingBlocks = new GravityFalls();
      const mainScroll = new MainScroll();
      const sections = document.querySelectorAll('section');
      const navBar = document.getElementById('navbar');
      // const logoBlack = document.getElementById('logo-black');
      // const logoWhite = document.getElementById('logo-white');

      const opts = {
        root: null,
        threshold: 0.6,
      };
      const handler = (entries, opts) => {
        entries.forEach((entry) => {
          if (entry.target.id) {
            const relativButton = navBar?.querySelector(`[data-scrollanchor=${entry.target.id}]`);
            // const target = document.querySelector()
            if (relativButton) {
              relativButton.addEventListener('click', (e) => {
                mainScroll.scrollTo(document.querySelector('#' + entry?.target.id));
              });
            }
          }
        });
      };

      sections.forEach((section) => {
        const observer = new IntersectionObserver(handler, opts);
        observer.observe(section);
      });
      // SWIPER ELEMENT
      const swiperClasses = [
        '.swiper-container-q1',
        '.swiper-container-q2',
        '.swiper-container-q3',
      ];
      const swiperNav = [
        { prev: '#form-prev-q1', next: '#form-next-q1' },
        { prev: '#form-prev-q2', next: '#form-next-q2' },
        { prev: '#form-prev-q3', next: '#form-next-q3' },
      ];
      for (let i = 0; i < swiperClasses.length; i++) {
        const swiper = new Swiper(swiperClasses[i], {
          spaceBetween: 20,
          centeredSlides: true,
          slidesPerView: 'auto',
          initialSlide: 1,
        });
        // on slide a la moitie
        const middle = document.querySelector(swiperClasses[i]);
        if (middle) {
          const numberOfSlides = middle!.children[0].children.length - 1;
          swiper.slideTo(numberOfSlides / 2);
        } else {
          swiper.slideTo(3);
        }

        // on ajoute l'event à la man vue que ça prends pas auto
        const qPrev = document.querySelector(swiperNav[i].prev);
        const qNext = document.querySelector(swiperNav[i].next);
        if (qPrev && qNext) {
          qPrev.addEventListener('click', (e: any) => {
            swiper.slidePrev();
          });
          swiper.on('slideChange', function () {
            qPrev.classList.remove('opacity-40');
            qNext.classList.remove('opacity-40');
            if (swiper.realIndex === swiper.slides.length - 1) {
              qNext.classList.add('opacity-40');
            } else if (swiper.realIndex === 0) {
              qPrev.classList.add('opacity-40');
            }
          });
          qNext.addEventListener('click', (e: any) => {
            swiper.slideNext();
          });
        }
      }
      // GESTION REPONSE
      const reponseForm = {
        step1: { code: '', data: '' },
        step2: { code: '', data: '' },
        step3: { code: '', data: '' },
      };
      // les cards Flip
      const cardOne = document.querySelector('[flip-btn="1"]');
      const cardTwo = document.querySelector('[flip-btn="2"]');
      const cardThree = document.querySelector('[flip-btn="3"]');
      // les + pour l'accordeon
      const faqOne = document.querySelector('[more-faq="1"]');
      const faqTwo = document.querySelector('[more-faq="2"]');
      const faqThree = document.querySelector('[more-faq="3"]');
      // GESTION FORMULAIRE
      const stepOne = document.querySelector('#intro-q1');
      const stepTwo = document.querySelector('#intro-q2');
      const stepThree = document.querySelector('#intro-q3');
      const startForm = document.querySelector('#start_form');
      const recapForm = document.querySelector('#recap-form');
      const formEnd = document.querySelector('#form-end');
      // plusieurs boutons pour fermer
      const bntCloseForm = document.querySelectorAll('.btn-close-form');
      // SUREMENT PLUS MALIN A FAIRE MAIS JE VEUX RENTRER
      const optQ1 = stepOne?.querySelectorAll('.form-option');
      const optQ2 = stepTwo?.querySelectorAll('.form-option');
      const optQ3 = stepThree?.querySelectorAll('.form-option');
      handleOption(optQ1, stepOne!, 1);
      handleOption(optQ2, stepTwo!, 2);
      handleOption(optQ3, stepThree!, 3);
      // Btn du formulaire
      const btnStepOne = document.querySelector('#validate-q1');
      const btnStepTwo = document.querySelector('#validate-q2');
      const btnStepThree = document.querySelector('#validate-q3');
      const btnAdvice = document.querySelector('#advice');
      const btnRedo = document.querySelector('#redo-form');
      const btnRedoEnd = document.querySelector('#redo-form-end');
      const btnAdviceCopy = document.querySelector('#advice-copy');
      const btnsClose = document.querySelectorAll('.close-form');
      const btnShare = document.querySelector('#share');
      const title_substance = document.querySelector('#title_advice_substance');
      const text_substance = document.querySelector('#text_advice_substance');
      const title_contexte = document.querySelector('#title_advice_contexte');
      const texte_contexte = document.querySelector('#text_advice_contexte');
      const title_individu = document.querySelector('#title_advice_individu');
      const text_individu = document.querySelector('#text_advice_individu');
      const validateBtns = [btnStepOne, btnStepTwo, btnStepThree, btnAdvice];

      // GTM EVENTS
      startForm?.addEventListener('click', (e: any) => {
        window.dataLayer.push({ event: 'start_experience' });
      });
      btnRedo?.addEventListener('click', (e: any) => {
        window.dataLayer.push({ event: 'click_redo_experience' });
      });
      btnRedoEnd?.addEventListener('click', (e: any) => {
        window.dataLayer.push({ event: 'click_redo_experience' });
      });
      btnAdvice?.addEventListener('click', (e: any) => {
        window.dataLayer.push({ event: 'click_advice' });
      });

      [cardOne, cardTwo, cardThree].forEach((element, index) => {
        element?.addEventListener('click', (e: any) => {
          window.dataLayer.push({
            event: 'click_interac_card',
            data: {
              card_id: index,
            },
          });
        });
      });

      [faqOne, faqTwo, faqThree].forEach((element, index) => {
        element?.addEventListener('click', (e: any) => {
          window.dataLayer.push({
            event: 'click_open_accordeon',
            data: {
              section: index,
            },
          });
        });
      });
      //

      btnsClose.forEach((btn: Element) => {
        btn.addEventListener('click', (e: any) => {
          stepForm = 1;
          stepOne?.classList.add('hide');
          stepTwo?.classList.add('hide');
          stepThree?.classList.add('hide');
          recapForm?.classList.add('hide');
          formEnd?.classList.add('hide');
          fallingBlocks.stop();
          handleReponse(true);
        });
      });
      // redo.forEach((btn: Element) => {
      btnRedo.addEventListener('click', (e: any) => {
        animateStep4(true);
        stepForm = 1;
        fallingBlocks.stop();
        handleReponse(true);
        setTimeout(() => {
          handleStep();
        }, 650);
      });
      btnRedoEnd.addEventListener('click', (e: any) => {
        formEnd?.classList.add('hide');
        stepForm = 1;
        handleReponse(true);

        setTimeout(() => {
          handleStep();
        }, 650);
      });
      // });
      validateBtns.forEach((btn: Element) => {
        btn.addEventListener('click', (e: any) => {
          // on doit valider qu'un choix a été fait déjà
          if (stepForm === 1) {
            const response = document.querySelector('.q1-active');
            if (response) {
              stepForm++;
              handleStep();
            }
          } else if (stepForm === 2) {
            const response = document.querySelector('.q2-active');
            if (response) {
              stepForm++;
              handleStep();
            }
          } else if (stepForm === 3) {
            const response = document.querySelector('.q3-active');
            if (response) {
              stepForm++;
              handleStep();
            }
          } else {
            stepForm++;
            handleStep();
          }
        });
      });
      // notre ui
      const uiWrapper = document.querySelector('#ui-wrapper');
      if (startForm) {
        startForm.addEventListener('click', (e: any) => {
          stepForm = 1;
          reponseForm.step1 = { code: '', data: '' };
          reponseForm.step2 = { code: '', data: '' };
          reponseForm.step3 = { code: '', data: '' };
          if (uiWrapper && uiWrapper.children.length > 0) {
            for (let i = 0; i < uiWrapper.children.length; i++) {
              const childToHandle = uiWrapper.children[i].children[0];
              gsap.set(childToHandle, { width: 0 });
            }
          }
          handleStep();
        });
      }
      if (bntCloseForm.length > 0) {
        bntCloseForm.forEach((element) => {
          element.addEventListener('click', (e: any) => {
            stepOne?.classList.add('hide');
            stepTwo?.classList.add('hide');
            stepThree?.classList.add('hide');
          });
        });
      }
      function handleOption(options: any, step: Element, index: number) {
        if (options && options.length > 0) {
          options.forEach((element: any) => {
            element.parentElement!.addEventListener('click', (e: any) => {
              if (index === 1) {
                const q1Active = document.querySelectorAll('.q1-active');
                if (q1Active.length === 0) {
                  gsap.to(btnStepOne, { opacity: 1, duraion: 0.25, ease: 'power1inOut' });
                }

                btnStepOne?.classList.remove('disabled');
                reponseForm.step1.code = element.parentElement.children[1].innerHTML;
                reponseForm.step1.data = element.parentElement.getAttribute('data-reponse');

                q1Active.forEach((active: any) => {
                  active.classList.remove('q1-active');
                  active.children[0].classList.add('opacity-0');
                });
                if (!element.classList.contains('q1-active')) {
                  // element.style.backgroundColor = '#ebc078';
                  element.classList.add('q1-active');
                  element.children[0].classList.remove('opacity-0');
                }
              } else if (index === 2) {
                const q2Active = document.querySelectorAll('.q2-active');
                if (q2Active.length === 0) {
                  gsap.to(btnStepTwo, { opacity: 1, duraion: 0.25, ease: 'power1inOut' });
                }

                btnStepTwo?.classList.remove('disabled');
                reponseForm.step2.code = element.parentElement.children[1].innerHTML;
                reponseForm.step2.data = element.parentElement.getAttribute('data-reponse');

                q2Active.forEach((active: any) => {
                  active.classList.remove('q2-active');
                  active.children[0].classList.add('opacity-0');
                });
                if (!element.classList.contains('q2-active')) {
                  // element.style.backgroundColor = '#ebc078';
                  element.classList.add('q2-active');
                  element.children[0].classList.remove('opacity-0');
                }
              } else if (index === 3) {
                const q3Active = document.querySelectorAll('.q3-active');
                if (q3Active.length === 0) {
                  gsap.to(btnStepThree, { opacity: 1, duraion: 0.25, ease: 'power1inOut' });
                }

                btnStepThree?.classList.remove('disabled');
                reponseForm.step3.code = element.parentElement.children[1].innerHTML;
                reponseForm.step3.data = element.parentElement.getAttribute('data-reponse');

                q3Active.forEach((active: any) => {
                  active.classList.remove('q3-active');
                  active.children[0].classList.add('opacity-0');
                });
                if (!element.classList.contains('q3-active')) {
                  // element.style.backgroundColor = '#ebc078';
                  element.classList.add('q3-active');
                  element.children[0].classList.remove('opacity-0');
                }
              }
            });
          });
        }
      }

      function resetData() {
        btnStepOne?.classList.add('disabled');
        btnStepTwo?.classList.add('disabled');
        btnStepThree?.classList.add('disabled');
        reponseForm.step1 = { code: '', data: '' };
        reponseForm.step2 = { code: '', data: '' };
        reponseForm.step3 = { code: '', data: '' };
        const allActive = document.querySelectorAll('.q-active');
        allActive.forEach((active: any) => {
          active.classList.remove('q-active');
          active.children[0].classList.add('opacity-0');
        });
        const q1Active = document.querySelectorAll('.q1-active');
        q1Active.forEach((active: any) => {
          active.classList.remove('q1-active');
          active.children[0].classList.add('opacity-0');
        });
        const q2Active = document.querySelectorAll('.q2-active');
        q2Active.forEach((active: any) => {
          active.classList.remove('q2-active');
          active.children[0].classList.add('opacity-0');
        });
        const q3Active = document.querySelectorAll('.q3-active');
        q3Active.forEach((active: any) => {
          active.classList.remove('q3-active');
          active.children[0].classList.add('opacity-0');
        });
      }
      function handleStep(closing?: boolean) {
        if (stepForm === 1) {
          resetData();
          // animateIntro(mainScroll);
          if (!closing) {
            animateStep1();
            window.dataLayer.push({ event: 'section_substance' });
          }
        } else if (stepForm === 2) {
          if (!closing) {
            animateStep1(true);
            animateStep2();
            window.dataLayer.push({ event: 'section_individu' });
          } else {
            animateStep2(true);
          }
        } else if (stepForm === 3) {
          if (!closing) {
            animateStep2(true);
            animateStep3();
            window.dataLayer.push({ event: 'section_contexte' });
          } else {
            animateStep3(true);
          }
        } else if (stepForm === 4) {
          animateStep3(true);

          handleReponse();
          setTimeout(() => {
            animateStep4();
            // INIT DE MATTER
            setTimeout(() => {
              const wrapper = document.querySelector('.recap-form-wrapper');
              fallingBlocks.start(wrapper);
            }, 650);
          }, 1000);
          // on va faire une opacity dessus plutôt non ?
          // uiWrapper?.classList.add('hide');
          // recapForm?.classList.remove('hide');
        } else {
          fallingBlocks.stop();
          recapForm?.classList.add('hide');
          formEnd?.classList.remove('hide');
        }
      }
      function handleReponse(reset?: boolean) {
        const etapRecap = document.querySelectorAll('.etape-recap');
        etapRecap.forEach((etap) => {
          if (etap.getAttribute('data-index') === '1') {
            // SUBSTANCE
            etap.children[1].innerHTML = reponseForm.step1.code;
          } else if (etap.getAttribute('data-index') === '2') {
            // INDIVIDU
            etap.children[1].innerHTML = reponseForm.step2.code;
          } else {
            // CONTEXTE
            etap.children[1].innerHTML = reponseForm.step3.code;
          }
        });

        if (reset) {
          title_substance!.innerHTML = '';
          text_substance!.innerHTML = '';
          title_contexte!.innerHTML = '';
          texte_contexte!.innerHTML = '';
          title_individu!.innerHTML = '';
          text_individu!.innerHTML = '';
        } else {
          title_substance!.innerHTML = reponseForm.step1.code;
          text_substance!.innerHTML = reponseForm.step1.data;
          title_contexte!.innerHTML = reponseForm.step2.code;
          texte_contexte!.innerHTML = reponseForm.step2.data;
          title_individu!.innerHTML = reponseForm.step3.code;
          text_individu!.innerHTML = reponseForm.step3.data;
        }
      }
    });
  },
  false
);