import './components/preloader/Preloader';

import './components/lp/affiliate_broker/affiliateBrokerHeader';
import './components/lp/affiliate_broker/affiliateBrokerLocaleStyle';
import { Tabs } from "./components/lp/saas2/Tabs";
import { Skins } from "./components/lp/saas2/Skins";
import { Modal } from "./components/modal/Modal";
import { ModalOnce } from "./components/modal/helper";
import { form } from "./components/form/Form";
import { Header } from "./components/lp/saas2/Header";
import { Lang } from "./components/lp/saas2/Lang";
import Phone from "./components/phone/Phone";
import Accordion from "./components/lp/affiliate_traffic/Accordion";
import './components/popup/PopupWebinar';
import {clickOutside} from "./helpers/click-outside";

window.addEventListener('load', () => {
  let url = new URL(window.location);
  const forms = document.querySelectorAll(`[data-widget="form"]`);

  const urlParams = new URLSearchParams(window.location.search);
  const entries = urlParams.entries();
  for (const entry of entries) {
    localStorage.setItem('form__' + entry[0], entry[1]);
  }

  Tabs();
  Skins();
  Header();
  Lang();
  Phone();
  Accordion();

  const saas2ModalControls = Modal('saas2', url.hash === '#form');
  Modal('saas', url.hash === '#form', {
    clickOutside: true,
  });
  Modal('once', url.hash === '#form', {
    onClose: () => {localStorage.setItem('form_once_opened', 'true')},
  });
  ModalOnce();
  const onFormSuccess = (container, reset) => {
    const onCloseForm = () => {
      saas2ModalControls.close();
      setTimeout(() => {
        reset();
      }, 1000);
    }
    let timeout = setTimeout(() => onCloseForm(), 5000);
    clickOutside(container, () => {
        clearTimeout(timeout);
        onCloseForm();
      }
    )
  }
  if (forms.length !== 0) {
    forms.forEach(item => {
      if (item) {
        const name = item.getAttribute('data-name');
        if(name && name === 'saas2-request2') {
          form(name, {
            onSuccess: onFormSuccess
          })
        } else if (name) {
          form(name);
        }
      }
    });
  }

  const detailsBtns = document.querySelectorAll(`[data-role="plan-details"]`);
  [...detailsBtns].forEach((detailsBtn) => {
    detailsBtn.addEventListener('click', () => {
      const optionsList = detailsBtn.parentNode.querySelector('.block-plans__planOptions');
      const button = detailsBtn.querySelector('span');
      optionsList.classList.toggle('active');
      detailsBtn.classList.toggle('active');
      if (optionsList.classList.contains('active')) {
        button.innerText = 'Hide';
      } else {
        button.innerText = 'Details';
      }
    });
  })

});