import Head from 'next/head';
import { useRouter } from 'next/router';
import type { AppProps } from 'next/app';
import { Fragment, useEffect, useState } from 'react';
import ThemeProvider from 'theme/ThemeProvider';
import { appWithTranslation } from 'next-i18next';
import { inter, ibm, barlow } from '@/styles/fonts';

// animate css
import 'animate.css';
// import swiper css
import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/thumbs';
// video player css
import 'plyr-react/plyr.css';
// glightbox css
import 'glightbox/dist/css/glightbox.css';
// custom scrollcue css
import 'plugins/scrollcue/scrollCue.css';
// Bootstrap and custom scss
import 'assets/scss/style.scss';
import 'styles/globals.css';
import 'leaflet/dist/leaflet.css';
import 'react-photo-album/masonry.css';
import 'react-photo-album/columns.css';
import 'react-datepicker/dist/react-datepicker.css';
import { AppUrl, NoIndex } from '@/data/constants';
function MyApp({ Component, pageProps }: AppProps) {
  const { pathname } = useRouter();

  useEffect(() => {
    if (typeof window !== 'undefined') {
      // load bootstrap functionality
      (() => {
        const bootstrap = require('bootstrap');

        // Enables multilevel dropdown
        (function (bs) {
          const CLASS_NAME = 'has-child-dropdown-show';

          bs.Dropdown.prototype.toggle = (function (_original) {
            return function () {
              document.querySelectorAll('.' + CLASS_NAME).forEach(function (e) {
                e.classList.remove(CLASS_NAME);
              });
              // @ts-ignore
              let dd = this._element.closest('.dropdown').parentNode.closest('.dropdown');
              for (; dd && dd !== document; dd = dd.parentNode.closest('.dropdown')) {
                dd.classList.add(CLASS_NAME);
              }
              // @ts-ignore
              return _original.call(this);
            };
          })(bs.Dropdown.prototype.toggle);

          document.querySelectorAll('.dropdown').forEach(function (dd) {
            dd.addEventListener('hide.bs.dropdown', function (e) {
              // @ts-ignore
              if (this.classList.contains(CLASS_NAME)) {
                // @ts-ignore
                this.classList.remove(CLASS_NAME);
                e.preventDefault();
              }
              e.stopPropagation();
            });
          });
        })(bootstrap);
      })();
    }
  }, []);

  // scroll animation added
  useEffect(() => {
    (async () => {
      const scrollCue = (await import('plugins/scrollcue')).default;
      scrollCue.init({ interval: -400, duration: 700, percentage: 0.8 });
      scrollCue.update();
    })();
  }, [pathname]);

  return (
    <Fragment>
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Grupo Velas</title>
        {NoIndex && AppUrl !== "grupovelas.com.mx" && <meta name="robots" content="noindex, nofollow" />}
      </Head>

      <ThemeProvider>
        <main className={`${inter?.variable} ${barlow?.variable} ${ibm?.variable} `}>
          <Component {...pageProps} />
        </main>
      </ThemeProvider>
    </Fragment>
  );
}

export default appWithTranslation(MyApp);