/* eslint-disable no-console */
// window.onload = function() {
window.addEventListener('message', handleMessageReceived);

function toggleHoursTab(dom, enable = false) {
  if (dom) {
    dom.tabIndex = enable ? '0' : '-1';
    dom.setAttribute('aria-selected', enable ? 'true' : 'false');
    const aTag = dom.getElementsByTagName('a')[0];
    aTag.style.opacity = enable ? 1 : 0.5;
  }
}

function toggleHoursPanel(dom, enable = false) {
  if (dom) {
    dom.setAttribute('aria-expanded', enable ? 'true' : 'false');
    dom.setAttribute('aria-hidden', enable ? 'false' : 'true');
    dom.style.display = enable ? 'block' : 'none';
  }
}

function formatTime(time) {
  let hour = time.split(':')[0];
  let min = time.split(':')[1];
  let part = hour >= 12 ? 'pm' : 'am';

  min = (min + '').length == 1 ? `0${min}` : min;
  hour = hour > 12 ? hour - 12 : hour;

  return `${
    hour.toString() === '00' ? '12' : parseInt(hour, 10)
  }:${min}${part}`;
}

function closeDayHours(dom) {
  if (dom.getElementsByTagName('div')[0]) {
    // previously open
    dom.appendChild(
      dom.getElementsByTagName('div')[0].getElementsByTagName('p')[0]
    );
    dom.getElementsByTagName('div')[0]?.remove();
  }
  dom.getElementsByTagName('p')[1].innerHTML = 'Closed';
}

function setDayHours(dom, hrs) {
  if (!dom.getElementsByTagName('div')[0]) {
    // previously closed
    const div = dom.appendChild(window.document.createElement('div'));
    div.style.display = 'block';
    hrs.map((intrval) => {
      const para = div.appendChild(window.document.createElement('p'));
      para.classList.add('sc-ovnq1p-0');
      para.classList.add('ovnq1p-0');
      para.classList.add('cLpOUX');
      para.appendChild(window.document.createElement('span'));
      para.appendChild(window.document.createElement('span'));
    });

    const pClosed = dom.getElementsByTagName('p')[1];
    pClosed.innerHTML = '';
    div.appendChild(pClosed);
  }
  //remove existing split iterval when status changed from split to open
  let para = dom.getElementsByTagName('div')[0].getElementsByTagName('p');

  if (para.length > hrs.length) {
    dom.getElementsByTagName('div')[0].removeChild(para[1]);
  }

  //looping through hours to add split hours based on openIntervals length
  hrs.map((intrval, position) => {
    const start = formatTime(intrval.start);
    const end = formatTime(intrval.end);

    let childPara = dom
      .getElementsByTagName('div')[0]
      .getElementsByTagName('p')[position];

    let spans = [];

    if (childPara) {
      //let para = dom.getElementsByTagName("div")[0].getElementsByTagName("p")[position]
      spans = childPara.getElementsByTagName('span');

      if (spans.length == 0) {
        childPara.appendChild(window.document.createElement('span'));
        childPara.appendChild(window.document.createElement('span'));

        spans = childPara.getElementsByTagName('span');
      }
    } else {
      const para = dom
        .getElementsByTagName('div')[0]
        .appendChild(window.document.createElement('p'));
      para.classList.add('sc-ovnq1p-0');
      para.classList.add('ovnq1p-0');
      para.classList.add('cLpOUX');
      para.appendChild(window.document.createElement('span'));
      para.appendChild(window.document.createElement('span'));

      spans = para.getElementsByTagName('span');
    }

    spans[0].setAttribute('itemprop', 'opens');

    if (start == end || (start == '12:00am' && end == '11:59pm')) {
      spans[0].innerHTML = 'Open 24 hrs';
      spans[0].setAttribute('content', 'Open 24 hrs');

      if (spans[1]) {
        spans[1].remove();
      }
    } else {
      spans[0].innerHTML = start;
      spans[0].setAttribute('content', start);

      const secondSpan = spans[1] ? spans[1] : spans[0].cloneNode(true);
      secondSpan.setAttribute('itemprop', 'closes');
      secondSpan.setAttribute('content', end);
      secondSpan.innerHTML = ' - ' + end;

      if (!spans[1]) {
        spans[0].parentNode.appendChild(secondSpan);
      }
    }
  });
}

function updateHours(dom, hrs, addtlText) {
  if (dom) {
    const hours = dom.getElementsByTagName('ul')[0].getElementsByTagName('li');

    // set monday
    if (
      hrs.monday.isClosed &&
      hrs.monday.isClosed != 'split' &&
      hrs.monday.isClosed != 'hours24'
    ) {
      closeDayHours(hours[0]);
    } else {
      setDayHours(hours[0], hrs.monday.openIntervals);
    }

    // set tuesday
    if (
      hrs.tuesday.isClosed &&
      hrs.tuesday.isClosed != 'split' &&
      hrs.tuesday.isClosed != 'hours24'
    ) {
      closeDayHours(hours[1]);
    } else {
      setDayHours(hours[1], hrs.tuesday.openIntervals);
    }

    // set wednesday
    if (
      hrs.wednesday.isClosed &&
      hrs.wednesday.isClosed != 'split' &&
      hrs.wednesday.isClosed != 'hours24'
    ) {
      closeDayHours(hours[2]);
    } else {
      setDayHours(hours[2], hrs.wednesday.openIntervals);
    }

    // set thursday
    if (
      hrs.thursday.isClosed &&
      hrs.thursday.isClosed != 'split' &&
      hrs.thursday.isClosed != 'hours24'
    ) {
      closeDayHours(hours[3]);
    } else {
      setDayHours(hours[3], hrs.thursday.openIntervals);
    }

    // set friday
    if (
      hrs.friday.isClosed &&
      hrs.friday.isClosed != 'split' &&
      hrs.friday.isClosed != 'hours24'
    ) {
      closeDayHours(hours[4]);
    } else {
      setDayHours(hours[4], hrs.friday.openIntervals);
    }

    // set saturday
    if (
      hrs.saturday.isClosed &&
      hrs.saturday.isClosed != 'split' &&
      hrs.saturday.isClosed != 'hours24'
    ) {
      closeDayHours(hours[5]);
    } else {
      setDayHours(hours[5], hrs.saturday.openIntervals);
    }

    // set sunday
    if (
      hrs.sunday.isClosed &&
      hrs.sunday.isClosed != 'split' &&
      hrs.sunday.isClosed != 'hours24'
    ) {
      closeDayHours(hours[6]);
    } else {
      setDayHours(hours[6], hrs.sunday.openIntervals);
    }

    // set addtl text
    dom
      .getElementsByTagName('ul')[1]
      .getElementsByTagName('li')[0]
      .getElementsByTagName('p')[0].innerHTML = addtlText;
  }
}

function createExtendedHrsTab(mainHrsTab) {
  if(!mainHrsTab) return;
  let domExtHoursTab = mainHrsTab.cloneNode(true);
  domExtHoursTab.classList.remove('hWUsla');
  domExtHoursTab.classList.remove('kTzKDV');
  domExtHoursTab.classList.remove('bar');
  domExtHoursTab.style.display = 'inline-block';
  domExtHoursTab.setAttribute('aria-controls', 'tab-list-item-1');
  domExtHoursTab.setAttribute('aria-selected', 'false');
  domExtHoursTab.setAttribute('id', 'tab_1');
  domExtHoursTab.setAttribute('tabindex', '-1');
  const p = domExtHoursTab.getElementsByTagName('p')[0];
  p.innerHTML = 'Extended Hours';
  p.parentNode.style.opacity = '0.5';
  mainHrsTab.parentNode.appendChild(domExtHoursTab);
  mainHrsTab.classList.add('bar');
  return domExtHoursTab;
}

function createExtendedHrsPanel(mainHrsPanel) {
  if(!mainHrsPanel) return;
  let domExtHoursPanel = mainHrsPanel.cloneNode(true);
  domExtHoursPanel.classList.remove('cKjIPf');
  domExtHoursPanel.classList.remove('PABmB');
  domExtHoursPanel.classList.remove('gFVtRY');
  domExtHoursPanel.classList.add('gSAkUH');
  domExtHoursPanel.classList.add('kzTSAb');
  domExtHoursPanel.classList.add('bjckby');
  domExtHoursPanel.style.display = 'none';
  domExtHoursPanel.setAttribute('id', 'tab-list-item-1');
  domExtHoursPanel.setAttribute('aria-expanded', 'false');
  domExtHoursPanel.setAttribute('aria-hidden', 'true');
  domExtHoursPanel.setAttribute('aria-labelledby', 'tab_1');
  domExtHoursPanel.setAttribute('hidden', '');
  mainHrsPanel.parentNode.appendChild(domExtHoursPanel);
  return domExtHoursPanel;
}

function get404ElementFromPage() {
  const page404Elements = document.getElementsByClassName("page-404");
  const page404 = page404Elements?.[0];
  return page404;
}


function buildPageFor404Page(objMsg, convertToHTML) {
  const page404 = get404ElementFromPage();
  if(!page404) return;

  const title = objMsg.content?.name;
  const image = objMsg.content?.serviceImage;
  let serviceOverview = "";
  let serviceDetails = "";
  let localCopy = "";

  objMsg.content?.serviceOverview?.json?.content?.forEach((node) => {
    serviceOverview += convertToHTML(node);
  });
  objMsg.content?.serviceDetails?.json?.content?.forEach((node) => {
    serviceDetails += convertToHTML(node);
  });
  objMsg.content?.localCopy?.json?.content?.forEach((node) => {
    localCopy += convertToHTML(node);
  });



  page404.innerHTML = objMsg?.templateHtml
    .replace("{{EE_TITLE}}", title)
    .replaceAll("{{EE_IMAGE}}", image)
    .replace("{{EE_SERVICE_OVERVIEW}}", serviceOverview)
    .replace("{{EE_SERVICE_DETAILS}}", serviceDetails)
    .replace("{{EE_LOCAL_COPY}}", localCopy);
}

const formatPhoneNumber = (phoneNumberString) => {
  if(!phoneNumberString) return "";

  if(phoneNumberString.length < 4) {
    return `(${phoneNumberString})`;
  }

  if(phoneNumberString.length < 6) {
    return `(${phoneNumberString.slice(0, 3)}) ${phoneNumberString.slice(3, phoneNumberString.length)}`;
  }

  return `(${phoneNumberString.slice(0, 3)}) ${phoneNumberString.slice(3, 6)}-${phoneNumberString.slice(6, phoneNumberString.length)}`;
};

const scrollToContactInfo = () => {
  const contactInfo = document.getElementsByClassName('panel-section')?.[0];
  if (!contactInfo) {
    return;
  }
  contactInfo.scrollIntoView({
    behavior: 'smooth',
    block: 'center',
  });
};

function handleMessageReceived(event) {
  const whitelist = [
    'https://easyeditor.azureedge.net',
    'https://easyeditoruat.azureedge.net',
    'https://easyeditorprd.azureedge.net',
    'https://easyeditor.nva.com',
    'http://localhost:8910',
  ];

  if (!whitelist.includes(event.origin)) {
    return;
  }

  document.body.style['pointer-events'] = 'none';

  // Hide GTM banner
  const oldEmergencyBanner = document.getElementById('covid19_msg');
  if (oldEmergencyBanner) {
    oldEmergencyBanner.style.display = 'none';
  }

  const getTruncateChars = (text) => {
    let canvas = document.createElement('canvas');
    canvas.style.cssText += 'display:none';
    document.body.appendChild(canvas);
    let fillStr = '';
    let dummyPara = document.createElement('p');
    dummyPara.style.cssText = 'display:none';
    let fontSize = window.innerWidth >= 1024 ? '18px' : '16px';
    let fontFamily = 'OpenSansSemiBold, sans-serif';
    if (document.getElementById('emergency-banner')) {
      document.querySelector('#emergency-banner').appendChild(dummyPara);
      let pDomTag = document.querySelector('#emergency-banner p');
      fontFamily = window.getComputedStyle(pDomTag).fontFamily;
      fontSize = window.getComputedStyle(pDomTag).fontSize;
      document.querySelector('#emergency-banner').removeChild(dummyPara);
    }
    for (var i = 0; i < text.length; i++) {
      let ctx = canvas.getContext('2d');
      ctx.font = `${fontSize} ${fontFamily}`;
      fillStr += text[i];
      let windowWidth = window.innerWidth > 1600 ? 1600 : window.innerWidth;
      if (
        ctx.measureText(fillStr.split('').join(String.fromCharCode(8202)))
          .width >
        (windowWidth - 30) * 2 - 100
      ) {
        fillStr = fillStr.substr(
          0,
          Math.min(fillStr.length, fillStr.lastIndexOf(' '))
        );
        break;
      }
    }
    document.body.removeChild(canvas);
    return fillStr.length;
  };

  const getHTMLFromJson = (json) => {
    let localCopy = '';

    const getText = (node) => {
      let paraContent = '';
      node.content
        .filter((item) => item.nodeType === 'text')
        .map((item) => {
          if (item.marks.length > 0) {
            let formatted = item.value;
            item.marks.map((mark) => {
              if (mark.type === 'bold')
                formatted = '<strong>' + formatted + '</strong>';
              if (mark.type === 'italic')
                formatted = '<em>' + formatted + '</em>';
            });
            paraContent += formatted;
          } else {
            paraContent += item.value;
          }
        });

      return paraContent;
    };

    json?.content?.map((node) => {
      if (node.nodeType == 'paragraph') {
        localCopy += `<p>${getText(node)}</p>`;
      } else if (node.nodeType === 'heading-1') {
        localCopy += `<h1>${getText(node)}</h1>`;
      } else if (node.nodeType === 'heading-2') {
        localCopy += `<h2>${getText(node)}</h2>`;
      } else if (node.nodeType === 'heading-3') {
        localCopy += `<h3>${getText(node)}</h3>`;
      } else if (node.nodeType === 'heading-4') {
        localCopy += `<h4>${getText(node)}</h4>`;
      }
    });

    return localCopy;
  };

  const objMsg = event.data instanceof Object ? event.data : JSON.parse(event.data);

  if (objMsg.author) {
    // Message is for the emergency banner
    // eslint-disable-next-line no-inner-declarations
    function truncateNode(node, limit) {
      if (node.nodeType === Node.TEXT_NODE) {
        node.textContent = node.textContent.substring(0, limit);
        return limit - node.textContent.length;
      }
      node.childNodes.forEach((child) => {
        limit = truncateNode(child, limit);
      });
      return limit;
    }
    const getTrimmedPara = () => {
      let width = window.innerWidth;
      const para = document.createElement('p');
      para.innerHTML = objMsg.author.description;
      if (width) {
        truncateNode(para, getTruncateChars(para.innerText));
      }
      return para;
    };
    const trimmedParagraph = getTrimmedPara();
    if (
      document.getElementById('emergency-banner') == null ||
      document
        .getElementById('emergency-banner')
        ?.className?.includes('preview-banner')
    ) {
      trimmedParagraph.style.color = 'white';
      trimmedParagraph.style.marginBottom = 0;
      let allAnchors = trimmedParagraph.querySelectorAll('a');
      allAnchors.forEach((each) => {
        each.style.textDecoration = 'underline';
        each.style.color = 'white';
      });
    }
    let mainParagraph = document.createElement('p');
    mainParagraph.innerHTML = objMsg.author.description;
    if (mainParagraph.innerText.length != trimmedParagraph.innerText.length) {
      trimmedParagraph.appendChild(document.createTextNode('... '));
      let readmoreAnchor = document.createElement('a');
      readmoreAnchor.href = '';
      readmoreAnchor.style.color = 'white';
      readmoreAnchor.style.textDecoration = 'underline';
      readmoreAnchor.innerHTML = 'Read More';
      trimmedParagraph.appendChild(readmoreAnchor);
    }

    const colors = {
      Corporate: { heroCTA: '#007f85' },
      EarthyV1: { heroCTA: '#6a7a62' },
      EarthyV2: { heroCTA: '#063b5d' },
      EarthyV3: { heroCTA: '#f59174' },
      Equine: { heroCTA: '#423F40' },
      ModernV1: { heroCTA: '#527c8e' },
      ModernV2: { heroCTA: '#ff5338' },
      ModernV3: { heroCTA: '#5069e7' },
      OutdoorV1: { heroCTA: '#f66e00' },
      OutdoorV2: { heroCTA: '#4b99b1' },
      OutdoorV3: { heroCTA: '#fe3725' },
      PetSuites: { heroCTA: '#4a0d66' },
      PlayfulV1: { heroCTA: '#745af6' },
      PlayfulV2: { heroCTA: '#65b766' },
      PlayfulV3: { heroCTA: '#ff8141' },
      PreciseV1: { heroCTA: '#00a7ff' },
      PreciseV2: { heroCTA: '#296293' },
      undefined: { heroCTA: 'rgb(255, 0, 0)' },
      null: { heroCTA: 'rgb(255, 0, 0)' },
    };

    const bannerColorClasses = {
      'Choose a value': 'rgb(255, 0, 0)',
      Red: 'rgb(255, 0, 0)',
      Grey: 'rgb(118, 118, 118)',
      'Theme Color': colors[objMsg.websiteTheme].heroCTA,
    };

    const domEmergencyBanner = document.getElementById('emergency-banner');
    if (domEmergencyBanner) {
      if (!objMsg.showBanner) {
        domEmergencyBanner.style.display = 'none';
      } else {
        domEmergencyBanner.style.display = 'block';
        domEmergencyBanner.innerHTML = '';
        domEmergencyBanner.appendChild(trimmedParagraph);
      }
      domEmergencyBanner.style.background =
        bannerColorClasses[objMsg.bannerBackgroundColor || 'Red'];
    } else {
      /*console.log(
          'Message for emergency banner received but DOM not found. Creating...'
        );*/
      const domNewEB = document.createElement('div');
      domNewEB.setAttribute('id', 'emergency-banner');
      domNewEB.style.color = 'white';
      domNewEB.style.width = '100%';
      domNewEB.style.height = '78px';
      domNewEB.style.background =
        bannerColorClasses[objMsg.bannerBackgroundColor || 'Red'];
      domNewEB.style.padding = '15px';
      domNewEB.style.textAlign = 'center';
      domNewEB.classList.add('banner-div');
      domNewEB.classList.add('preview-banner');
      domNewEB.innerHTML = '';
      domNewEB.appendChild(trimmedParagraph);
      document.body.insertBefore(domNewEB, document.body.firstChild);
      if (!objMsg.showBanner) {
        domNewEB.style.display = 'none';
      } else {
        domNewEB.style.display = null;
      }
    }
  } else if (objMsg.type === 'EmergencyBanner') {
    // Message is for the emergency banner
    // eslint-disable-next-line no-inner-declarations
    function truncateNode(node, limit) {
      if (node.nodeType === Node.TEXT_NODE) {
        node.textContent = node.textContent.substring(0, limit);
        return limit - node.textContent.length;
      }
      node.childNodes.forEach((child) => {
        limit = truncateNode(child, limit);
      });
      return limit;
    }

    const getTrimmedPara = () => {
      let width = window.innerWidth;
      const para = document.createElement('p');
      para.innerHTML = objMsg.content.description;
      if (width) {
        truncateNode(para, getTruncateChars(para.innerText));
      }
      return para;
    };
    const trimmedParagraph = getTrimmedPara();
    if (
      document.getElementById('emergency-banner') == null ||
      document
        .getElementById('emergency-banner')
        ?.className?.includes('preview-banner')
    ) {
      trimmedParagraph.style.color = 'white';
      trimmedParagraph.style.marginBottom = 0;
      let allAnchors = trimmedParagraph.querySelectorAll('a');
      allAnchors.forEach((each) => {
        each.style.textDecoration = 'underline';
        each.style.color = 'white';
      });
    }
    let mainParagraph = document.createElement('p');
    mainParagraph.innerHTML = objMsg.content.description;
    if (mainParagraph.innerText.length != trimmedParagraph.innerText.length) {
      trimmedParagraph.appendChild(document.createTextNode('... '));
      let readmoreAnchor = document.createElement('a');
      readmoreAnchor.href = '';
      readmoreAnchor.style.color = 'white';
      readmoreAnchor.style.textDecoration = 'underline';
      readmoreAnchor.innerHTML = 'Read More';
      trimmedParagraph.appendChild(readmoreAnchor);
    }

    const colors = {
      Corporate: {
        heroCTA: '#007f85',
      },
      EarthyV1: {
        heroCTA: '#6a7a62',
      },
      EarthyV2: {
        heroCTA: '#063b5d',
      },
      EarthyV3: {
        heroCTA: '#f59174',
      },
      Equine: {
        heroCTA: '#423F40',
      },
      ModernV1: {
        heroCTA: '#527c8e',
      },
      ModernV2: {
        heroCTA: '#ff5338',
      },
      ModernV3: {
        heroCTA: '#5069e7',
      },
      OutdoorV1: {
        heroCTA: '#f66e00',
      },
      OutdoorV2: {
        heroCTA: '#4b99b1',
      },
      OutdoorV3: {
        heroCTA: '#fe3725',
      },
      PetSuites: {
        heroCTA: '#4a0d66',
      },
      PlayfulV1: {
        heroCTA: '#745af6',
      },
      PlayfulV2: {
        heroCTA: '#65b766',
      },
      PlayfulV3: {
        heroCTA: '#ff8141',
      },
      PreciseV1: {
        heroCTA: '#00a7ff',
      },
      PreciseV2: {
        heroCTA: '#296293',
      },
      undefined: {
        heroCTA: 'rgb(255, 0, 0)',
      },
      null: {
        heroCTA: 'rgb(255, 0, 0)',
      },
    };

    const bannerColorClasses = {
      'Choose a value': 'rgb(255, 0, 0)',
      Red: 'rgb(255, 0, 0)',
      Grey: 'rgb(118, 118, 118)',
      'Theme Color': colors[objMsg.content.websiteTheme].heroCTA,
    };

    const domEmergencyBanner = document.getElementById('emergency-banner');
    if (domEmergencyBanner) {
      if (!objMsg.content.showBanner) {
        domEmergencyBanner.style.display = 'none';
      } else {
        domEmergencyBanner.style.display = 'block';
        domEmergencyBanner.innerHTML = '';
        domEmergencyBanner.appendChild(trimmedParagraph);
      }
      domEmergencyBanner.style.background =
        bannerColorClasses[objMsg.content.bannerBackgroundColor || 'Red'];
    } else {
      const domNewEB = document.createElement('div');
      domNewEB.setAttribute('id', 'emergency-banner');
      domNewEB.style.color = 'white';
      domNewEB.style.width = '100%';
      domNewEB.style.height = '78px';
      domNewEB.style.background =
        bannerColorClasses[objMsg.content.bannerBackgroundColor || 'Red'];
      domNewEB.style.padding = '15px';
      domNewEB.style.textAlign = 'center';
      domNewEB.classList.add('banner-div');
      domNewEB.classList.add('preview-banner');
      domNewEB.innerHTML = '';
      domNewEB.appendChild(trimmedParagraph);
      document.body.insertBefore(domNewEB, document.body.firstChild);
      /*console.log(
          'creating banner and appending read more if truncate text and original text are not equal'
        );*/

      if (!objMsg.content.showBanner) {
        domNewEB.style.display = 'none';
      } else {
        domNewEB.style.display = null;
      }
    }
  } else if (objMsg.editingHours) {
    const domMainHoursTab = document.getElementById('tab_0');
    let domExtHoursTab = document.getElementById('tab_1');
    const domMainHoursPanel = document.getElementById('tab-list-item-0');
    let domExtHoursPanel = document.getElementById('tab-list-item-1');

    if (objMsg.editingHours === 'main') {
      toggleHoursTab(domMainHoursTab, true);
      toggleHoursPanel(domMainHoursPanel, true);
      toggleHoursTab(domExtHoursTab, false);
      toggleHoursPanel(domExtHoursPanel, false);
    } else {
      if (!domExtHoursTab) {
        domExtHoursTab = createExtendedHrsTab(domMainHoursTab);
      }

      if (!domExtHoursPanel) {
        domExtHoursPanel = createExtendedHrsPanel(domMainHoursPanel);
      }

      toggleHoursTab(domMainHoursTab, false);
      toggleHoursPanel(domMainHoursPanel, false);
      toggleHoursTab(domExtHoursTab, true);
      toggleHoursPanel(domExtHoursPanel, true);
    }
  } else if (objMsg.mainHours || objMsg.extendedHours) {
    let domMainHoursTab = document.getElementById('tab_0');
    let domExtHoursTab = document.getElementById('tab_1');

    let domMainHoursPanel = document.getElementById('tab-list-item-0');
    let domExtHoursPanel = document.getElementById('tab-list-item-1');

    if (!objMsg.haveExtendedHours) {
      if (domExtHoursTab) domExtHoursTab.remove();
      if (domExtHoursPanel) domExtHoursPanel.remove();
      domMainHoursTab?.classList.remove('bar');
      toggleHoursTab(domMainHoursTab, true);
      toggleHoursPanel(domMainHoursPanel, true);
    } else {
      if (!domExtHoursTab) {
        domExtHoursTab = createExtendedHrsTab(domMainHoursTab);
      }
      if (!domExtHoursPanel) {
        domExtHoursPanel = createExtendedHrsPanel(domMainHoursPanel);
      }
    }

    if (domExtHoursPanel && objMsg.haveExtendedHours) {
      updateHours(
        domExtHoursPanel,
        objMsg.extendedHours.extendedHours,
        objMsg.extendedHours.c_extendedAdditionalHoursText || ''
      );
    }
    if (domMainHoursPanel) {
      updateHours(
        domMainHoursPanel,
        objMsg.mainHours.hours,
        objMsg.mainHours.additionalHoursText || ''
      );
    }
  } else if (objMsg.scrollToStaffId || objMsg.scrollToGroupId) {
    if (objMsg.scrollToGroupId && !objMsg.scrollToStaffId) {
      let scrollToEl = document.getElementById(objMsg.scrollToGroupId);
      scrollToEl?.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
      });
    } else if (objMsg.scrollToGroupId && objMsg.scrollToStaffId) {
      let groupElem = document.getElementById(objMsg.scrollToGroupId);
      // let scrollToEl = groupElem.querySelector(
      //   `[id="${objMsg.scrollToStaffId}"]`
      // );
      let scrollToEl = document.getElementById(objMsg.scrollToStaffId);
      scrollToEl?.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
      });
    }
  } else if (objMsg.type === 'UpdateId') {
    const element = document.getElementById(objMsg.content.old);
    if (element) element.id = objMsg.content.new;
  } else if (objMsg.type === 'Services') {
    if (!Array.isArray(objMsg.content)) {
      return;
    }
    // Get all group keys
    const groups = objMsg.content.map((group) => group.key);

    // Get group sections container div
    const parent = window.document.querySelectorAll('.wrapper')[0];
    const serviceBlade = parent.getElementsByClassName("services-blade");

    const existingServicesIds = [...serviceBlade].map(element => element.parentElement?.getAttribute("id"));
    // Remove sections that are not in the new list
    existingServicesIds?.forEach(id => {
      if(!groups.includes(id)) {
        const section = document.getElementById(id);
        section?.remove();
      }
    });


    // get new groups
    const newGroups = groups?.filter(id => !existingServicesIds.includes(id));


    const globalFooter = parent.getElementsByClassName('globalFooter')[0];
    
    // ADD GROUP
    newGroups
      .forEach((id) => {
        // Clone the last group
        const lastGroup = serviceBlade?.[0]?.parentElement;
        if(!lastGroup) return;

        const clone = lastGroup.cloneNode(true);
        clone.id = id;

        clone.getElementsByTagName('h2')[0].innerHTML = objMsg.content.find(
          (group) => group.key === id
        ).groupName;

        const serviceTileContainer = clone.getElementsByClassName(
          'service-tile-container'
        )[0];
        serviceTileContainer.innerHTML = '';
        parent.insertBefore(clone, globalFooter);
      });

    // REORDER GROUPS
    groups.forEach((id) => {
      const section = document.getElementById(id);
      if (!section) return;
      parent.insertBefore(section, globalFooter);
    });
    const aServiceDetailClone = document.querySelectorAll("a.service-tile")?.[0];

    objMsg.content.forEach((group) => {
      // Get all staff keys
      const services = group.services.map(
        (service) => service.serviceEntryId
      );

      // Get  group section
      const domGroupSection = document.getElementById(group.key);

      //Update Group description
      const groupDescription =
        domGroupSection?.getElementsByClassName('blade-description')[0];

      let description = '';

      group.bodyText?.json?.content
        .filter((para) => para.nodeType == 'paragraph')
        .map((para) => {
          para.content
            .filter((item) => item.nodeType === 'text')
            .map((item) => {
              if (item.marks.length > 0) {
                let formatted = item.value;
                item.marks.map((mark) => {
                  if (mark.type === 'bold')
                    formatted = '<strong>' + formatted + '</strong>';
                  if (mark.type === 'italic')
                    formatted = '<em>' + formatted + '</em>';
                });
                description += formatted;
              } else {
                description += item.value + '\n';
              }
            });
        });

      if (groupDescription) { 
        groupDescription.innerHTML = `<p>${description}</p>`;
      }

      // Hide services
      if (group.hideBlade) {
        domGroupSection?.setAttribute('style', 'display: none');
      }

      if(!aServiceDetailClone) return;

      const serviceSectionParent =
        domGroupSection.getElementsByClassName('service-tile-container')?.[0];

      if(!serviceSectionParent) return;

      // create the new service section
      const clone = aServiceDetailClone.cloneNode(true);

      group.services
        .filter((s) => !document.getElementById(s.serviceEntryId))
        ?.forEach((newService) => {
          const newClone = clone.cloneNode(true);
          newClone.id = newService.serviceEntryId;
          const header = newClone.getElementsByClassName('card-header')[0];
          const innerHeader = header.getElementsByTagName('a')[0] || header;
          innerHeader.innerHTML = newService.name;
          const bodyText = newClone.getElementsByClassName('card-rich-text')[0];
          let description = '';
          newService.serviceOverview.json.content &&
            newService.serviceOverview.json.content
              .filter((para) => para.nodeType == 'paragraph')
              .map((para) => {
                para.content
                  .filter((item) => item.nodeType === 'text')
                  .map((item) => {
                    if (item.marks.length > 0) {
                      let formatted = item.value;
                      item.marks.map((mark) => {
                        if (mark.type === 'bold')
                          formatted = '<strong>' + formatted + '</strong>';
                        if (mark.type === 'italic')
                          formatted = '<em>' + formatted + '</em>';
                      });
                      description += formatted;
                    } else {
                      description += item.value + '\n';
                    }
                  });
                description += '<br>';
              });

          bodyText.innerHTML = `<p>${description}</p>`;

          const picture = newClone.querySelector('.image-container picture');
          const image = newClone.querySelector('.image-container img');
          image.src = `https:${newService.serviceImage}?fit=fill&fm=webp&h=334&w=375&q=72`;
          picture.innerHTML = ''; // remove the source tags
          picture.append(image);

          serviceSectionParent.append(newClone);
        });

      //Remove old services
      [...domGroupSection?.getElementsByClassName('service-tile')]
        .map((node) => node.id)
        .filter((sId) => !services.includes(sId))
        .forEach((s) => document.getElementById(s).remove());

      // REORDER STAFF
      services.map((id) => {
        serviceSectionParent.append(
          domGroupSection.querySelector(`[id="${id}"]`)
        );
      });

      group.services.forEach((s) => {
        document
          .getElementById(s.serviceEntryId)
          ?.setAttribute(
            'style',
            `display: ${s.hideService ? 'none' : null}`
          );
      });
      
    });

    // make visible groups if hideBlade is false
    objMsg.content.forEach((group) => {
      const domGroupSection = document.getElementById(group.key);
      if (!domGroupSection) return;
      if (!group.hideBlade) {
        domGroupSection?.setAttribute('style', 'display: block');
      }else{
        domGroupSection?.setAttribute('style', 'display: none');
      }      
    });

  } else if (objMsg.type === 'ServicesUpdateGroupDescription') {
    const group = objMsg.content;
    // Get  group section
    const domGroupSection = document.getElementById(group.key);

    //Update Group description
    const groupDescription =
      domGroupSection?.getElementsByClassName('blade-description')[0];

    let description = '';

    group.bodyText?.json?.content
      .filter((para) => para.nodeType == 'paragraph')
      .map((para) => {
        para.content
          .filter((item) => item.nodeType === 'text')
          .map((item) => {
            if (item.marks.length > 0) {
              let formatted = item.value;
              item.marks.map((mark) => {
                if (mark.type === 'bold')
                  formatted = '<strong>' + formatted + '</strong>';
                if (mark.type === 'italic')
                  formatted = '<em>' + formatted + '</em>';
              });
              description += formatted;
            } else {
              description += item.value + '\n';
            }
          });
      });

    groupDescription.innerHTML = `<p>${description}</p>`;
  } else if (objMsg.type === 'ServicesDetailsUpdateLocalCopy') {
    const domDetails =
      document.getElementById('LocalCopyDiv');

    const getText = (node) => {
      let paraContent = '';
      node.content
        .filter((item) => item.nodeType === 'text')
        .map((item) => {
          if (item.marks.length > 0) {
            let formatted = item.value;
            item.marks.map((mark) => {
              if (mark.type === 'bold')
                formatted = '<strong>' + formatted + '</strong>';
              if (mark.type === 'italic')
                formatted = '<em>' + formatted + '</em>';
            });
            paraContent += formatted;
          } else {
            paraContent += item.value;
          }
        });

      return paraContent;
    };

    const convertToHTML = (node) => {
      let textHTML = '';
      if (node.nodeType == 'paragraph') {
        textHTML += `<p>${getText(node)}</p>`;
      } else if (node.nodeType === 'heading-1') {
        textHTML += `<h1>${getText(node)}</h1>`;
      } else if (node.nodeType === 'heading-2') {
        textHTML += `<h2>${getText(node)}</h2>`;
      } else if (node.nodeType === 'heading-3') {
        textHTML += `<h3>${getText(node)}</h3>`;
      } else if (node.nodeType === 'heading-4') {
        textHTML += `<h4>${getText(node)}</h4>`;
      }
      return textHTML;
    };

    if(!domDetails){
      buildPageFor404Page(objMsg, convertToHTML);
      return;
    };

    let localCopy = '';

    objMsg.content.localCopy?.json?.content?.forEach((node) => {
      localCopy += convertToHTML(node);
    });

    domDetails.innerHTML = `${localCopy}`;
    
  } else if (objMsg.type === 'ServicesDetails') {
    //console.log('Service Details msg received');
  } else if (objMsg.type === 'ServicesDeleteGroup') {
    const groups = objMsg.content.groups;

    groups?.forEach((group) => {
      if (group.hideBlade) {
        // Get group section
        const domGroupSection = document.getElementById(group.key);
        domGroupSection.setAttribute('style', 'display: none');
      }
    });
  } else if (objMsg.type === 'ServicesAddExistingGroup') {
    const groups = objMsg.content;
    // Get group sections container div
    const parent = window.document.querySelectorAll('.wrapper')[0];

    groups.forEach((group) => {
      // Get  group section
      if (group.hideBlade === true) {
        return;
      }
      const domGroupSection = document.getElementById(group.key);
      
      if (domGroupSection?.style?.display === 'none') {
        // relocate the element to the bottom
        parent.insertBefore(domGroupSection, parent.lastChild);
      }
      domGroupSection.setAttribute('style', 'display: block');
    });
    if(objMsg.goToItem) {
      document.getElementById(objMsg.goToItem).scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      });
    }
  } else if (objMsg.type === 'ServicesAddGroup') {
    // Get all group keys
    const groups = objMsg.content.map((group) => group.key);

    // Get group sections container div
    const parent = window.document.querySelectorAll('.wrapper')[0];

    // Get all the section tags inside div class wrapper
    const sections = parent.getElementsByClassName('nva-service-blade');

    // Extract IDs of group sections only
    const rawGroupSectionIds = [];
    for (let i = 0; i < sections.length; i++) {
      if (
        sections[i].parentElement.getAttribute('class') === 'p-services wrapper' &&
        sections[i].hasAttribute('id')
      )
        rawGroupSectionIds.push(sections[i].id);
    }

    // cleaned group Sections
    const groupSectionIds = rawGroupSectionIds.filter((id) =>
      groups.includes(id)
    );

    // ADD GROUP
    groups
      .filter((id) => !groupSectionIds.includes(id))
      .forEach((id) => {
        // Clone the last group
        const lastGroup = document.getElementById(
          groupSectionIds[groupSectionIds.length - 1]
        );

        const clone = lastGroup.cloneNode(true);
        clone.id = id;

        clone.getElementsByTagName('h2')[0].innerHTML = objMsg.content.find(
          (group) => group.key === id
        ).groupName;

        const serviceTileContainer = clone.getElementsByClassName(
          'service-tile-container'
        )[0];
        serviceTileContainer.innerHTML = '';
        parent.insertBefore(clone, parent.lastChild);
      });
    if(objMsg.goToItem) {
      document.getElementById(objMsg.goToItem).scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      });
    }
  } else if (objMsg.type === 'ServicesAddService') {
    const group = objMsg.content;

    //Get the group section
    const domGroupSection = document.getElementById(group.key);
    //Get a clone of a service tile
    const clone = document
      .getElementsByClassName('service-tile')[0]
      .cloneNode(true);
    //Get the service tile container
    const serviceTileContainer = domGroupSection.getElementsByClassName(
      'service-tile-container'
    )[0];

    group.services.forEach((s) => {
      document
        .getElementById(s.serviceEntryId)
        ?.setAttribute('style', `display: ${s.hideService ? 'none' : null}`);
    });

    group.services
      .filter((s) => !document.getElementById(s.serviceEntryId))
      .forEach((service) => {
        clone.id = service.serviceEntryId;
        clone.getElementsByTagName('h3')[0].innerHTML = service.name;
        let serviceOverview = getHTMLFromJson(service.serviceOverview.json);
        clone.getElementsByClassName('card-rich-text')[0].innerHTML =
          serviceOverview;

        const picture = clone.querySelector('.image-container picture');
        const image = clone.querySelector('.image-container img');
        image.src = `https:${service.serviceImage}?fit=fill&fm=webp&h=334&w=375&q=72`;
        picture.innerHTML = ''; // remove the source tags
        picture.append(image);
        serviceTileContainer.appendChild(clone);
      });
  } else if (objMsg.type === 'contactInfo') {
    let liPhoneNumber = document.getElementById('phone-number');
    if (!liPhoneNumber) {
      liPhoneNumber = document.getElementById('nva-contact-us-card__list-item phone-number');
    }
    let liTextNumber = document.getElementById('text-number');
    let liFaxNumber = document.getElementById('fax-number');

    const setContactInfoPhoneNumber = () => {
      if(!liPhoneNumber) return;
      liPhoneNumber.innerHTML = '';
      if(!objMsg?.content?.phone) return;
      let formattedPhone = formatPhoneNumber(objMsg?.content?.phone);
      if(!formattedPhone) return;
      let template = objMsg?.template?.replaceAll('{EE_LABEL}', 'Phone')?.replaceAll('{EE_NUMBER}', formattedPhone);
      if(!template) return;
      liPhoneNumber.innerHTML = template;
    };
    setContactInfoPhoneNumber();
    const setContactInfoTextNumber = () => {
      if(!liTextNumber) return;
      liTextNumber.innerHTML = '';
      if(!objMsg?.content?.text) return;
      let formattedTextNumber = formatPhoneNumber(objMsg?.content?.text);
      if(!formattedTextNumber) return;
      let template = objMsg?.template?.replaceAll('{EE_LABEL}', 'Text')?.replaceAll('{EE_NUMBER}', formattedTextNumber);
      if(!template) return;
      liTextNumber.innerHTML = template;
    };
    setContactInfoTextNumber();
    const setContactInfoFaxNumber = () => {
      if(!liFaxNumber) return;
      liFaxNumber.innerHTML = '';
      if(!objMsg?.content?.fax) return;
      let formattedFaxNumber = formatPhoneNumber(objMsg?.content?.fax);
      if(!formattedFaxNumber) return;
      let template = objMsg?.template?.replaceAll('{EE_LABEL}', 'Fax')?.replaceAll('{EE_NUMBER}', formattedFaxNumber);
      if(!template) return;
      liFaxNumber.innerHTML = template;
    };
    setContactInfoFaxNumber();


  }else if (objMsg.goToLocalCopy) {
    let scrollToEl = document.getElementById("LocalCopyDiv");
    scrollToEl?.scrollIntoView({
      behavior: 'smooth',
      block: 'end',
    });
  } else {
    // Staff Info
    if (Array.isArray(objMsg)) {
      // Get all group keys
      const groups = objMsg.map((group) => group.key);

      // Get group sections container div
      const parent = window.document.querySelectorAll('.wrapper')[0];

      // Get all the section tags inside div class wrapper
      const sections = parent.getElementsByTagName('section');

      // Extract IDs of group sections only
      const rawGroupSectionIds = [];
      for (let i = 0; i < sections.length; i++) {
        if (
          sections[i].parentElement.getAttribute('class') === 'wrapper' &&
          sections[i].hasAttribute('id')
        )
          rawGroupSectionIds.push(sections[i].id);
      }

      // DELETE GROUP
      rawGroupSectionIds
        .filter((id) => {
          // return !groups.includes(id) && id.length > 3
          return !groups.includes(id);
        })
        .map((id) => {
          document.getElementById(id).remove();
        });

      // cleaned group Sections
      const groupSectionIds = rawGroupSectionIds.filter((id) =>
        groups.includes(id)
      );

      // ADD GROUP
      groups
        .filter((id) => !groupSectionIds.includes(id))
        .map((id) => {
          // Clone the last group
          const lastGroup = document.getElementById(
            groupSectionIds[groupSectionIds.length - 1]
          );
          const clone = lastGroup.cloneNode(true);
          clone.id = id;
          const staffDesc = clone.getElementsByClassName('staff-description');
          if (staffDesc.length > 0) {
            staffDesc[0].remove();
          }
          clone.style.background = 'white';
          clone.getElementsByTagName('h2')[0].style.color = 'black';
          clone.getElementsByTagName('h2')[0].innerHTML = objMsg.find(
            (group) => group.key === id
          ).groupName;
          const cloneSections = clone.getElementsByTagName('section');
          while (cloneSections[0]) {
            cloneSections[0].parentNode.removeChild(cloneSections[0]);
          }
          parent.insertBefore(
            clone,
            parent.getElementsByClassName('globalFooter')[0]
          );
        });

      // REORDER GROUPS
      groups.map((id) => {
        parent.insertBefore(
          document.getElementById(id),
          parent.getElementsByClassName('globalFooter')[0]
        );
      });

      objMsg.forEach((group) => {
        // Get all staff keys
        const staffMembers = group.staffMembers.map(
          (staff) => staff.staffEntryId
        );

        // Get  group section
        const domGroupSection = document.getElementById(group.key);

        // EDIT GROUP
        if (domGroupSection.getElementsByTagName('h2')[0]) {
          domGroupSection.getElementsByTagName('h2')[0].innerHTML =
            group.groupName;
        } else {
          const h2Element = window.document.createElement('h2');
          h2Element.classList.add('sc-1lhs05s-0');
          h2Element.classList.add('bvWGOr');
          h2Element.classList.add('bQuPGT');
          h2Element.classList.add('staff-heading');
          h2Element.setAttribute('role', 'heading');
          h2Element.setAttribute('aria-level', '2');
          h2Element.id = group.groupName;
          h2Element.innerHTML =
            !group.groupName || group.groupName == 'No Name'
              ? ''
              : group.groupName;
          domGroupSection
            .getElementsByClassName('tile-wrapper')[0]
            .insertBefore(
              h2Element,
              domGroupSection.getElementsByClassName('tile-wrapper')[0]
                .firstChild
            );
        }

        if (group.bodyText?.json) {
          let description = '';
          group.bodyText.json.content
            .filter((para) => para.nodeType == 'paragraph')
            .map((para) => {
              para.content
                .filter((item) => item.nodeType === 'text')
                .map((item) => {
                  if (item.marks.length > 0) {
                    let formatted = item.value;
                    item.marks.map((mark) => {
                      if (mark.type === 'bold')
                        formatted = '<strong>' + formatted + '</strong>';
                      if (mark.type === 'italic')
                        formatted = '<em>' + formatted + '</em>';
                    });
                    description += formatted;
                  } else {
                    description += item.value + '\n';
                  }
                });
              description += '<br>';
            });

          if (domGroupSection.getElementsByClassName('staff-description')[0]) {
            let staffDesc =
              domGroupSection.getElementsByClassName('staff-description')[0];
            staffDesc.innerHTML = '';
            staffDesc.appendChild(window.document.createElement('p'));
            staffDesc.getElementsByTagName('p')[0].innerHTML = description;
          } else {
            const divElement = window.document.createElement('div');
            divElement.classList.add('sc-wturor-0');
            divElement.classList.add('kbsDvK');
            divElement.classList.add('col-lg-8');
            divElement.classList.add('col-sm-10');
            divElement.classList.add('staff-description');
            divElement.appendChild(window.document.createElement('p'));
            domGroupSection
              .getElementsByClassName('tile-wrapper')[0]
              .insertBefore(
                divElement,
                domGroupSection.getElementsByClassName('tile-wrapper')[0]
                  .firstChild.nextSibling
              );
            domGroupSection
              .getElementsByClassName('staff-description')[0]
              .getElementsByTagName('p')[0].innerHTML = description;
          }
        } else {
          //Remove description
          let staffElement =
            domGroupSection.getElementsByClassName('staff-description')[0];

          staffElement && staffElement.remove();
        }

        // Get all the section tags inside group section
        const sections = domGroupSection.getElementsByTagName('section');

        // Set the correct Variation for the Staff Card
        for (let i = 0; i < sections.length; i++) {
          let section = sections[i];
          let image = section.getElementsByTagName('img')[0];
          let link =
            section.getElementsByClassName('blade-link')[0]?.firstChild;
          if (link) link.className = '';
          if (group.variation === 'Variation-A') {
            image?.setAttribute(
              'style',
              'filter: none; transition: filter 0.3s ease-out 0s;'
            );
            section.classList.remove('five-blade');
            section.classList.add('three-blade');
            if (link) {
              link.className =
                'sg-btn-cpnt primary-anchor sc-1ux5mjm-0 gHSvbo arrow';
            }
          } else {
            image?.setAttribute('style', ' height: 218px; object-fit: cover;');
            section.classList.remove('three-blade');
            section.classList.add('five-blade');
            if (link) link.className = 'sc-1ux5mjm-0 chtvcU arrow';
          }
        }

        // Extract IDs of staff sections
        let staffSectionIds = [];
        for (let i = 0; i < sections.length; i++) {
          staffSectionIds.push(sections[i].id);
        }

        // extract unique IDs only - because staff sections have duplicates
        // it is in div showCarouselContainer and showAllTilesContainer
        staffSectionIds = staffSectionIds.filter(
          (value, index, self) => self.indexOf(value) === index
        );

        // DELETE STAFF
        staffSectionIds
          .filter((id) => !staffMembers.includes(id))
          .map((id) => domGroupSection.querySelector(`[id="${id}"]`).remove());

        // ADD STAFF
        staffMembers
          .filter(
            (id) =>
              staffSectionIds.length === 0 || !staffSectionIds.includes(id)
          )
          .map((id) => {
            // Staff info
            const staff = group.staffMembers.find(
              (staff) => staff.staffEntryId === id
            );

            // Check for existing staff sections
            const existingStaffSections =
              domGroupSection.getElementsByTagName('section');
            let newStaffSection = null;
            if (existingStaffSections.length > 0) {
              newStaffSection = existingStaffSections[0].cloneNode(true);
              newStaffSection.id = id;
              Array.from(newStaffSection.childNodes).forEach((node) => {
                if (node.classList?.contains('blade-subheading')) {
                  node.remove();
                } else if (node.classList?.contains('blade-para')) {
                  node.remove();
                }
              });
            } else {
              newStaffSection = window.document.createElement('section');
              newStaffSection.classList.add('sc-h1x7ke-0');
              newStaffSection.classList.add('h1x7ke-0');
              newStaffSection.classList.add('kNxsWf');
              newStaffSection.classList.add('sc-h1x7ke-1');
              newStaffSection.classList.add('h1x7ke-1');
              newStaffSection.classList.add('gurLZX');
              newStaffSection.classList.add('three-blade');
              newStaffSection.id = id;

              const divImage = window.document.createElement('div');
              divImage.classList.add('blade-image');
              const imgTag = window.document.createElement('img');
              imgTag.classList.add('sc-eu5zgc-0');
              imgTag.classList.add('eu5zgc-0');
              imgTag.classList.add('jyhTFI');
              imgTag.classList.add('dWfdZB');
              imgTag.classList.add('gqsKUR');
              divImage
                .appendChild(window.document.createElement('picture'))
                .appendChild(imgTag);
              newStaffSection.appendChild(divImage);

              const pName = window.document.createElement('p');
              pName.classList.add('sc-ovnq1p-0');
              pName.classList.add('ovnq1p-0');
              pName.classList.add('cLpOUX');
              pName.classList.add('heading_three');
              pName.classList.add('blade-heading');
              pName.innerHTML = staff.name;
              newStaffSection.appendChild(pName);

              const pLink = window.document.createElement('p');
              pLink.classList.add('sc-ovnq1p-0');
              pLink.classList.add('ovnq1p-0');
              pLink.classList.add('cLpOUX');
              pLink.classList.add('blade-link');
              const aViewProfile = window.document.createElement('a');
              aViewProfile.classList.add('sc-1ux5mjm-0');
              aViewProfile.classList.add('cUVdBo');
              aViewProfile.classList.add('arrow');
              aViewProfile.innerHTML = 'View Profile';
              pLink.appendChild(aViewProfile);
              newStaffSection.appendChild(pLink);
            }

            // appendChild inside 8th div of the group section
            domGroupSection
              .getElementsByTagName('div')[7]
              .appendChild(newStaffSection);
          });

        // only reorder and edit if there are staff members already
        if (domGroupSection.getElementsByTagName('section').length > 0) {
          const staffSectionParent =
            domGroupSection.getElementsByTagName('section')[0]?.parentNode;

          // REORDER STAFF
          staffMembers.map((id) => {
            staffSectionParent.append(
              domGroupSection.querySelector(`[id="${id}"]`)
            );
          });

          group.staffMembers.forEach((staff) => {
            // Get staff section
            const domStaffSection = domGroupSection.querySelector(
              `[id="${staff.staffEntryId}"]`
            );

            const domImgParent = domStaffSection.getElementsByTagName('img')[0];

            if (domImgParent) {
              domImgParent.setAttribute(
                'srcset',
                staff.staffImage.includes('data:')
                  ? staff.staffImage
                  : staff.staffImage +
                      '?fit=fill&fm=jpg&fl=progressive&h=360&w=328'
              );
              if (
                staff.staffImage.includes('data:') &&
                !domStaffSection.classList.contains('five-blade')
              ) {
                domImgParent.style.height = '241px';
                domImgParent.style.width = '220px';
                domImgParent.style.objectFit = 'cover';
              }
            } else {
              const divImage =
                domStaffSection.getElementsByClassName('blade-image')[0];
              let pictureEle = divImage.getElementsByTagName('picture');
              if (!pictureEle || pictureEle.length == 0) {
                const invalidSpan = divImage.getElementsByTagName('span');
                if (invalidSpan) {
                  divImage.removeChild(invalidSpan[0]);
                }
                const imgTag = window.document.createElement('img');
                imgTag.classList.add('sc-eu5zgc-0');
                imgTag.classList.add('eu5zgc-0');
                imgTag.classList.add('jyhTFI');
                imgTag.classList.add('dWfdZB');
                imgTag.classList.add('gqsKUR');
                if (
                  staff.staffImage.includes('data:') &&
                  !domStaffSection.classList.contains('five-blade')
                ) {
                  imgTag.style.height = '241px';
                  imgTag.style.width = '220px';
                  imgTag.style.objectFit = 'cover';
                }
                divImage
                  .appendChild(window.document.createElement('picture'))
                  .appendChild(imgTag);
                // divImage.classList.add("blade-image")

                imgTag.setAttribute(
                  'srcset',
                  staff.staffImage.includes('data:')
                    ? staff.staffImage
                    : staff.staffImage +
                        '?fit=fill&fm=jpg&fl=progressive&h=360&w=328'
                );
              }
            }

            Array.prototype.slice
              .call(domStaffSection.getElementsByTagName('source'))
              .forEach((source) => {
                domImgParent.parentNode?.removeChild(source);
              });

            if (domStaffSection.classList.contains('five-blade')) {
              // domStaffSection.getElementsByTagName('img')[0].style.width =
              //   '198px';
              domStaffSection.getElementsByTagName('img')[0].style.height =
                '218px';
              domStaffSection.getElementsByTagName('img')[0].style.objectFit =
                'cover';
            }

            domStaffSection.getElementsByTagName('p')[0].innerHTML = staff.name;
            domStaffSection.getElementsByTagName('p')[0].style.color = 'black';

            if (staff.title) {
              const titleElement =
                domStaffSection.getElementsByClassName('blade-subheading')[0];
              if (titleElement) {
                titleElement.innerHTML = staff.title;
              } else {
                let p = null;
                if (
                  domStaffSection.previousSibling &&
                  domStaffSection.previousSibling.tagName == 'SECTION'
                ) {
                  const previousStaffSection = domStaffSection.previousSibling;
                  if (
                    previousStaffSection.getElementsByClassName(
                      'blade-subheading'
                    ).length > 0
                  ) {
                    p = previousStaffSection
                      .getElementsByClassName('blade-subheading')[0]
                      .cloneNode(true);
                  }
                }
                if (!p) {
                  p = window.document.createElement('p');
                  p.classList.add('ovnq1p-0');
                  p.classList.add('cLpOUX');
                  p.classList.add('heading_four');
                  p.classList.add('blade-subheading');
                  p.style.color = 'black';
                }

                p.innerHTML = staff.title;
                domStaffSection.insertBefore(
                  p,
                  domStaffSection.getElementsByClassName('blade-heading')[0]
                    .nextSibling
                );
              }
            } else {
              // if no title in objMsg but title element is in the DOM, remove
              const titleElement = domStaffSection.getElementsByTagName('p')[1];
              if (
                titleElement &&
                titleElement.classList.contains('blade-subheading')
              ) {
                titleElement.remove();
              }
            }

            if (staff.shortBio?.json) {
              let shortBio = '';
              staff.shortBio.json.content
                .filter((para) => para.nodeType == 'paragraph')
                .map((para) => {
                  para.content
                    .filter((item) => item.nodeType === 'text')
                    .map((item) => {
                      if (item.marks.length > 0) {
                        let formatted = item.value;
                        item.marks.map((mark) => {
                          if (mark.type === 'bold')
                            formatted = '<strong>' + formatted + '</strong>';
                          if (mark.type === 'italic')
                            formatted = '<em>' + formatted + '</em>';
                        });
                        shortBio += formatted;
                      } else {
                        shortBio += item.value + '\n';
                      }
                    });
                  shortBio += '<br>';
                });
              if (
                domStaffSection
                  .getElementsByTagName('p')
                  [staff.title ? 2 : 1]?.classList?.contains('blade-link')
              ) {
                const domParent =
                  domStaffSection.getElementsByTagName('p')[0].parentNode;
                const div = window.document.createElement('div');
                div.classList.add('sc-wturor-0');
                div.classList.add('wturor-0');
                div.classList.add('iQHNbA');
                div.classList.add('blade-para');
                const shortBioP = window.document.createElement('p');
                shortBioP.style.color = 'black';
                div.appendChild(shortBioP);
                domParent.insertBefore(
                  div,
                  domParent.getElementsByClassName('blade-link')[0]
                );
              }

              if (
                domStaffSection.getElementsByTagName('p')[
                  staff.title ? 2 : 1
                ] &&
                staff.staffVariation !== 'Variation-B'
              ) {
                domStaffSection.getElementsByTagName('p')[
                  staff.title ? 2 : 1
                ].innerHTML = shortBio;
              } else {
                domStaffSection
                  .getElementsByClassName('blade-para')[0]
                  ?.remove();
              }
            } else {
              // if shortbio is deleted, remove element too
              const shortBioElement =
                domStaffSection.getElementsByTagName('div')[1];

              if (shortBioElement?.classList.contains('blade-para')) {
                shortBioElement.remove();
              }
            }
          });
        }
      });
    }
  }
  if(objMsg.goToContactInfo){
    scrollToContactInfo();
  }
}