let menuItems = document.querySelectorAll(".menu__item");
menuItems = [...menuItems];

let subMenuItems = document.querySelectorAll(".sub-menu__item");
subMenuItems = [...subMenuItems];

let listingToggle = document.querySelectorAll(".listing--toggle");
listingToggle = [...listingToggle];
let modalClose = document.querySelectorAll(".modal__close");

let starter = [... document.querySelectorAll(".starter")];

const getStarters = () =>{
  starter = [... document.querySelectorAll(".starter")]
  return [... document.querySelectorAll(".starter")];
};
const titleCase = (text)=>{
  let newText = text.toLowerCase().replace(text[0].toLowerCase(),text[0].toUpperCase());
  return newText
};
const arrCtaClickable=[... document.querySelectorAll(".cta-clickable")];


const clickElementNormalice=(element)=>{
  let tag = element.tagName.toLowerCase();
  let tagNormalized;
  switch(tag){
    case "a":
      tagNormalized = "link";
      break;
    default:
      tagNormalized = tag;
  }
  return tagNormalized;
}
const modalControl = (modal) => {
  if ("vibrate" in navigator) {
    navigator.vibrate(30);
  }
  modal.classList.contains("modal--visible")
    ? (modal.classList.add("modal--hidden"),
      modal.classList.remove("modal--visible"))
    : (modal.classList.remove("modal--hidden"),
      modal.classList.add("modal--visible"));
};
const dataLayerClick = (btn) => {
  if (btn.classList.contains("cta-clickable")) {
    dataLayer.push({
      event:"cta_click",
      event_label: btn.dataset.event,
      environment: environment,
      product_tipology: productTipology,
      click_product: btn.dataset.product,
      click_section: `${document.location.origin}${document.location.pathname}`,
      click_element: clickElementNormalice(btn),
      click_name: titleCase(btn.innerText),
    });
  }
};
const anchorDatalayerClick = () =>{
  arrCtaClickable.forEach(a=>{
    if(a.tagName.toLocaleLowerCase() =="a"){
      a.addEventListener("click", ()=>{dataLayerClick(a)},"false");
    }
  });
};

anchorDatalayerClick();
const buttonHandler = (btn) => {
  if ("vibrate" in navigator) {
    navigator.vibrate(30);
  }
  let type = btn.dataset.openin;
  switch (type) {
    case "modalIframe":
      document.querySelector(`#${btn.dataset.iframeid}`).src =
        btn.dataset.iframe;
    case "modal":
      document
        .querySelector(`#${btn.dataset.target}`)
        .classList.contains("modal--visible")
        ? (document
            .querySelector(`#${btn.dataset.target}`)
            .classList.remove("modal--visible"),
          document
            .querySelector(`#${btn.dataset.target}`)
            .classList.add("modal--hidden"))
        : (document
            .querySelector(`#${btn.dataset.target}`)
            .classList.add("modal--visible"),
            dataLayerClick(btn),
          document
            .querySelector(`#${btn.dataset.target}`)
            .classList.remove("modal--hidden"));

      break;
    case "popup":
      window.open(
        btn.dataset.target,
        (target = "_blank"),
        "toolbar=no,scrollbars=yes,resizable=yes,top=500,left=500,width=420,height=600"
      );
      break;
      case "redirect":
        document.location.replace(btn.dataset.target);
        break;
    default:
      dataLayerClick(btn);
      break;
  }
};

const clearClassArr = (a, c) => {
  a.forEach((e) => {
    e.classList.remove(c);
  });
};
const getURL = () => {
  return document.location.href;
};

const verifyActive = (list) => {
  let path = getURL();
  list.forEach(
    i => 
    {
      if(path.includes(i.firstElementChild.href))
      {
        clearClassArr(list, "active");
        i.classList.add("active");
      }
    }
  );
};

const activeItem = (list) => {
  clearClassArr(list, "active");
  verifyActive(list);
};
if (menuItems.length) {
  activeItem(menuItems);
}
if (subMenuItems.length) {
  activeItem(subMenuItems);
}

const listingHandle = (clicked) => {
  clicked.classList.contains("listing--open")
    ? clearClassArr(listingToggle, "listing--open")
    : (clearClassArr(listingToggle, "listing--open"),
      clicked.classList.add("listing--open"));
};

const updateStarters=()=>{
  getStarters();
  if (starter.length > 0) {
    starter.forEach((b) => {
      b.addEventListener(
        "click",
        () => {
          event.preventDefault();
          buttonHandler(b);
        },
        false
      );
    });
  }
};

updateStarters();

if (modalClose.length > 0) {
  modalClose.forEach((mc) =>
    mc.addEventListener(
      "click",
      () => {
        modalControl(mc.parentElement.parentElement);
      },
      false
    )
  );
}

if (listingToggle.length > 0) {
  listingToggle.forEach((l) =>
    l.addEventListener(
      "click",
      () => {
        listingHandle(l);
      },
      false
    )
  );
}

const getParameter = (param, u = window.location.search) => {
  let search = u;
  let params = new URLSearchParams(search);
  return params.get(param);
};

const presetField = (val, field) => {
  field.value = val;
};




const utmVariables = [
  "utm_id",
  "utm_campaign",
  "utm_source",
  "utm_medium",
  "utm_content",
];
const preFillVariables = ["t", "p", "d"];
const bcrDirectoUrl = new URL(
  "https://bcrinstance.my.salesforce-sites.com/FormularioBCRDirecto"
);
const getStarterURL = (s) => {
  return new URL(s.dataset.iframe);
};

const getParameters = (arr, u = null) => {
  let params = "";
  arr.forEach((v, i) => {
    params = `${params}${v}=${
      u == null ? getParameter(v) : getParameter(v, u)
    }${i >= arr.length ? "" : "&"}`;
  });
  return params;
};


const fovController = (arr, optionalString="") => {
  if (getParameter("utm_id")) {
    let utm = getParameters(utmVariables);
    arr.forEach((a) => {
      if (a.dataset.iframe != null ||a.dataset.iframe != undefined ) {
        console.log("");
        let u = getStarterURL(a);
        if (
          getStarterURL(a).host === bcrDirectoUrl.host &&
          getStarterURL(a).path === bcrDirectoUrl.path
        ) {
          if (getParameter("t", getStarterURL(a).href) != null) {
            let prefill = getParameters(
              preFillVariables,
              getStarterURL(a).href
            );
            let fov = `${getParameter("fov", getStarterURL(a).searchParams)}-${getParameter("utm_campaign")}-${getParameter("utm_source")}-${getParameter("utm_medium")}-${getParameter("utm_content")}${optionalString}`;
            let newIframe =(`${getStarterURL(a).origin}${getStarterURL(a).pathname}?fov=${fov}&${prefill}&${utm}`).replaceAll(" ","%20") ;
            a.dataset.iframe = newIframe;
          }
        }
      }
    });
  }
  if(getParameter("utm_id")==null && (optionalString!="")){
    let utm = getParameters(utmVariables);
    arr.forEach((a) => {
      if (a.dataset.iframe != undefined && a.dataset.iframe!="") {
        if (
          getStarterURL(a).host === bcrDirectoUrl.host &&
          getStarterURL(a).path === bcrDirectoUrl.path
        ) {
          if (getParameter("t", getStarterURL(a).href) != null) {
            let prefill = getParameters(
              preFillVariables,
              getStarterURL(a).href
            );
            let fov = `${getParameter("fov", getStarterURL(a).searchParams)}${optionalString}`;
            let newIframe =(`${getStarterURL(a).origin}${getStarterURL(a).pathname}?fov=${fov}&${prefill}&${utm}`).replaceAll(" ","%20") ;
            a.dataset.iframe = newIframe;
          }
        }
      }
    });
  }
};

fovController(starter);



const growingContainers = [...document.querySelectorAll(".growing--container")];

const growthControllersArr = [
  ...document.querySelectorAll(".container--growth-toggle"),
];

const clearClass = (arr, c) => {
  arr.forEach((e) => e.classList.remove(c));
};
const grow = (arr, c, n)=>{
    arr.forEach((e,i)=> i>=n?e.classList.add(c):false);
};
const growthController = (gc) => {
  
  
  let growingElement = gc.previousElementSibling;
  let growingElementChildren = [...growingElement.children];
  let showingElements = growingElement.dataset.items;
  let showingState = growingElement.dataset.state;
  showingState==="false"?(clearClass(growingElementChildren, "element--hidden"),growingElement.dataset.state="true",gc.innerHTML="Ver Menos"):(grow(growingElementChildren,"element--hidden", showingElements),growingElement.dataset.state="false",gc.innerHTML="Ver Más");
};

if(growthControllersArr){
   // growthControllersArr.forEach(e=> e.addEventListener("click", ()=>{growthController(e)},false));
   growthControllersArr.forEach(e=> {e.addEventListener("click", ()=>{growthController(e)},false);growthController(e)});
}


const getRandomNumber = (min, max) => {
  if (min > max) {
      throw new Error("Min must be less than or equal to max.");
  }
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

const getLetterFromNumber = (num) => {
  if (num < 1 || num > 26) {
      throw new Error("Input must be between 1 and 26.");
  }
  return String.fromCharCode(64 + num);
};

const getNumberFromLetter = (letter) => {
  const num = letter.toUpperCase().charCodeAt(0) - 64;
  if (num < 1 || num > 26) {
      throw new Error("Input must be a single letter between A and Z.");
  }
  return num;
};

const setCookie = (name, value, days = 7, path = "/", domain = "", secure = false) => {
  const expires = new Date(Date.now() + days * 864e5).toUTCString();
  let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; expires=${expires}; path=${path}`;
  if (domain) cookieString += `; domain=${domain}`;
  if (secure) cookieString += `; secure`;
  document.cookie = cookieString;
};

const getCookie = (name) => {
  const cookie = document.cookie.split('; ').find(row => row.startsWith(`${encodeURIComponent(name)}=`));
  return cookie ? decodeURIComponent(cookie.split('=')[1]) : null;
};
const experimentDataLayer = (name, variant) =>{
  dataLayer.push({
      event:"ab_test",
      event_label: name,
      environment: environment,
      product_tipology: productTipology,
      click_section: `${document.location.origin}${document.location.pathname}`,
      experiment_variant: variant
      });
}
const expCookieController = (name, scenarios) =>{
  let cookieValue = getCookie(name);
  if (!cookieValue) {
    const randomNumber = getRandomNumber(1, scenarios);
    setCookie(name, getLetterFromNumber(randomNumber), 30);
    cookieValue = getLetterFromNumber(randomNumber);  
  }
  return cookieValue;
};
const expTriggered = (cookieName, containerID, scenarios, classBase) =>{
  let cookie = getCookie(cookieName);
  
  let cookieValue;
  if(cookie){
    cookieValue = getNumberFromLetter(cookie);
    const container = document.querySelector(`#${containerID}`);
    for (let i = 0; i <= scenarios; i++) {
        container.classList.remove(`${classBase}${i}`);
    }
    container.classList.add(`${classBase}${cookieValue}`);
    fovController(starter,`-${cookieName}-${cookie}`);
  }
  experimentDataLayer(cookieName, getLetterFromNumber(cookieValue));

};
const experimentController = (name, containerID, scenarios, classBase) => {
  expCookieController(name, scenarios);
  expTriggered(name, containerID,scenarios,classBase);
};


window.addEventListener("message", function(event) {
  const iframeOrigin = "https://bcrinstance.my.salesforce-sites.com";
  if (event.origin !== iframeOrigin) {
    console.warn("Message received from unknown origin:", event.origin);
    return;
  }
  if (event.data.event === "iframe_form_sent") {
    console.log("Form sent event received:", event.data);
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: "form_sent",
      event_label:event.data.event,
      product: event.data.product,
      producto_tipology: event.data.producto_tipology,
      environment: event.data.environment
    });
    console.log("Event successfully sent to dataLayer.");
  }
});