function observeValue(options) {
    const { value_to_observe, interval = 500, timeout = 50000, callback, timeoutCallback } = options;
    let elapsedTime = 0;

    const intervalId = setInterval(() => {
        elapsedTime += interval;
        if (typeof window[value_to_observe] !== 'undefined') {
            clearInterval(intervalId);
            callback(window[value_to_observe]);
        } else if (elapsedTime >= timeout) {
            clearInterval(intervalId);
            if (timeoutCallback) {
                timeoutCallback();
            }
        }
    }, interval);
}
window.observeValue = observeValue;

const debounce = (function () {
    let timer = 0;
    return function (callback, delay) {
        clearTimeout(timer);
        timer = setTimeout(callback, delay);
    };
})();
window.debounce = debounce;

function toggleSlide(options) {
    const { container, closeContainer = false, onContainerOpen } = options;
    if (container){
        if (!container.classList.contains('active') && !closeContainer) {
            container.classList.add('active');
            container.style.height = 'auto';

            let height = container.clientHeight + 'px';
            container.style.height = '0px';
            setTimeout(function () {
                container.style.height = height;
                if (onContainerOpen) {
                    onContainerOpen();
                }
            }, 0);
            setTimeout(function () {
                container.style.overflow = 'visible';
            }, 500);
        } else {
            container.style.overflow = 'hidden';
            if (closeContainer) {
                container.classList.remove('active');
                return;
            }
            container.style.height = '0px';
            container.addEventListener(
                'transitionend',
                function () {
                    container.classList.remove('active');
                },
                {
                    once: true,
                }
            );
        }
    }
}
window.toggleSlide = toggleSlide;

function toggleFormDropdown(event, elementId) {
    if (event.type === 'click' || (event.type === 'keydown' && (event.key === 'Enter' || event.key === ' '))) {
      const dropdown = document.getElementById(elementId);
      const options = {
        container: dropdown,
      }
      toggleSlide(options);
    }
  }
  window.toggleFormDropdown = toggleFormDropdown;

  function selectOption(option, dropdownId = 'selectedOption') {
    const selectedOption = document.getElementById(dropdownId);
    selectedOption.textContent = option;
    const dropdown = document.getElementById('form-dropdown');
    const options = {
      container: dropdown,
    }
    toggleSlide(options);
  }
  window.selectOption = selectOption;

  function formatDate(date, format = "MM-DD-YYYY") {
    const selectedDate = new Date(date);
    const month = (selectedDate.getMonth() + 1).toString().padStart(2, '0');
    const day = selectedDate.getDate().toString().padStart(2, '0');
    const year = selectedDate.getFullYear();

    if (format === 'MM-DD-YYYY') {
        return `${month}-${day}-${year}`;
    } else if (format === 'YYYY-MM-DD') {
        return `${year}-${month}-${day}`;
    } else {
        throw new Error(`Unsupported format: ${format}`);
    }
}
window.formatDate = formatDate;

window.showCustomDialog = function showCustomDialog(id){
    const dialog = document.getElementById(id);
    if(dialog){
        dialog.setAttribute('show-dialog', 'true');
    }
}
window.hideCustomDialog = function hideCustomDialog(id){
    const dialog = document.getElementById(id);
    if(dialog){
        dialog.setAttribute('show-dialog', 'false');
    }
}

// it will fix AG Grid header, when its reaches top of the page
window.fixGridHeader = function fixGridHeader() {
    if(Boolean(window.scrollHeader) == true){
        const pageHeader = document.getElementById("main-header-v2");
        if (pageHeader.classList.contains("fixed")) {
            pageHeader.classList.remove("fixed");
            pageHeader.classList.add("relative");
        }
        const agHeader = document.querySelector('.ag-header');
        if (window.scrollY >= 319) {
            agHeader.style.position = "fixed";
            agHeader.style.top = "0";
            agHeader.style.zIndex = "99";
            agHeader.style.width = 'calc(100% - 100px)';
        } else {
            agHeader.style.position = "static";
            agHeader.style.zIndex = "0";
            agHeader.style.width = '100%';
        }
    }
}

// CUSTOM THEME FOR HL
function primeVueConfiguration(Theme, definePreset){
    function setPreset() {
        return definePreset(Theme, {
            components: {
                chip: {
                    colorScheme: {
                        light: {
                            remove: {
                                icon: {
                                    // color: '#000',
                                    // background: '#ffff',
                                },
                            },
                            background: '#000',
                            color: '#ffff',
                        },
                    },
                },
            },
            semantic: {
                primary: {
                    50: '{zinc.50}',
                    100: '{zinc.100}',
                    200: '{zinc.200}',
                    300: '{zinc.300}',
                    400: '{zinc.400}',
                    500: '{zinc.500}',
                    600: '{zinc.600}',
                    700: '{zinc.700}',
                    800: '{zinc.800}',
                    900: '{zinc.900}',
                    950: '{zinc.950}',
                },
                colorScheme: {
                    light: {
                        primary: {
                            color: '{zinc.950}',
                            inverseColor: '#ffffff',
                            hoverColor: '{zinc.900}',
                            activeColor: '{zinc.800}',
                        },
                        highlight: {
                            background: '{zinc.950}',
                            focusBackground: '{zinc.700}',
                            color: '#ffffff',
                            focusColor: '#ffffff',
                        },
                    },
                },
            },
        });
    }
    return {
        theme: {
            preset: setPreset(),
            options: {
                darkModeSelector: '.my-app-dark',
            },
        },
        zIndex: {
            menu: 1030,
            overlay: 1040,
            modal: 1050,
            //toast: 1060
            tooltip: 1070,
        },
    }
}
window.primeVueConfiguration = primeVueConfiguration;
export { primeVueConfiguration }
  
function createCancelableRequest() {
    let abortController = null;
  
    return {
      getSignal() {
        // Cancel the previous request if it exists
        if (abortController) {
          abortController.abort();
        }
        abortController = new AbortController();
        return abortController.signal;
      },
     //if you want to manually cancel the API request then invoke this method   
      cancelRequest() {
        if (abortController) {
          abortController.abort();
        }
      }
    };
  }
  export { createCancelableRequest }
  
//   LAZY LOAD IMAGES THAT ADDED AS BACKGROUND-IMAGE
  window.addEventListener('load', function () {
    const lazyBackgrounds = document.querySelectorAll('.lazy-bg');
  
    lazyBackgrounds.forEach((element) => {
      const bgUrl = element.getAttribute('data-bg-url');
      element.style.backgroundImage = `url(${bgUrl})`;
    });
  });

//   TO HIDE DROPDOWNS WHEN CLICK OUTSIDE
function hideDropdowns(selectors) {
    selectors.forEach((selector) => {
        let idElement = document.getElementById(selector);
        let classElements = document.getElementsByClassName(selector);
        if (idElement) {
            idElement.style.display = 'none';
        } else if (classElements && classElements.length) {
            [...classElements].forEach(ele => ele.style.display = 'none')
        }
    });
}
export { hideDropdowns }