// remove dropdown menu when mouseleave in index more actions
document.querySelectorAll("[data-table-list]").forEach((row) => {
  row.addEventListener("mouseleave", function() {
      if (row.querySelector("[data-dropdown-actions]")) {
          row.querySelector("[data-dropdown-actions]").classList.remove("block");
          row.querySelector("[data-dropdown-actions]").classList.add("hidden");
      }
  });
});
// remove dropdown menu when mouseleave in index more actions

//redirect edit or show page for table row click
document.querySelectorAll("[data-table-body]").forEach((table) => {
    if (document.body.clientWidth < 768 || document.body.clientWidth > 1200) {
        let rows = table.querySelectorAll("tr");

        rows.forEach((row) => {
            let row_href = row.getAttribute("href");

            if (!row_href) {
                return;
            }

            let td = row.getElementsByTagName("td");
            let first_selector = row.querySelector("[data-bulkaction]") && row.querySelector("[data-bulkaction]") !== null ? 1 : 0;

            if (row_href) {
                for (let i = first_selector; i < td.length - 1; i++) {
                    let td_item = td[i];

                    td_item.addEventListener("click", (event) => {
                        // click disabled when preview dialog is open
                        if (event.target.closest('[data-tooltip-target]')) {
                            return;
                        }
                        // click disabled when preview dialog is open
                        window.location.href = row_href;
                    });

                    // added target blank for click mouse middle button
                    td_item.addEventListener('mousedown', (event) => {
                        if (event.button == 1 || event.buttons == 4) {
                            window.open(row_href, "_blank");
                        }
                     });
                     // added target blank for click mouse middle button
                }
            }
        });
    }

    if (document.body.clientWidth <= 768) {
        table.querySelectorAll('[data-table-list]').forEach((actions) => {
            actions.querySelector('[data-mobile-actions]').addEventListener('click', function() {
                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show');
                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.remove('opacity-0', 'invisible');
      
                this.closest('td').querySelector('[data-mobile-actions-modal]').addEventListener('click', function() {
                    this.classList.add('opacity-0', 'invisible');
                    this.classList.remove('show');
                });
            });
        });
    }
});
//redirect edit or show page for table row click

//collapse accordion
function toggleSub(key, event) {
  let isExpanded =
      document.querySelectorAll(
          `[data-collapse="${key}"]` + ".active-collapse"
      ).length > 0;

  if (isExpanded) {
      this.collapseSub(key, event);
  } else {
      this.expandSub(key, event);
  }
}

function collapseSub(key, event) {
  event.stopPropagation();
  event.target.classList.add("rotate-90");

  document
      .querySelectorAll(`[data-collapse="${key}"]` + ".active-collapse")
      .forEach(function(element) {
          element.classList.toggle("active-collapse");
          element.classList.toggle("collapse-sub");
      });

  // if collapsed key has childs(table row constantly), they will be collapsed as well
  document
      .querySelectorAll(`[data-collapse="${key}"]` + " button[node|='child']")
      .forEach(function(element) {
              element.childNodes[0].classList.add("rotate-90")

              this.collapseSub(element.getAttribute("node"), event);
          }.bind(this)
      );
}

function expandSub(key, event) {
  event.stopPropagation();
  event.target.classList.remove("rotate-90");

  document
      .querySelectorAll(`[data-collapse="${key}"]`)
      .forEach(function(element) {
          if (element.getAttribute("data-animation")) {
              element.classList.toggle("active-collapse-animation");
          }

          element.classList.toggle("active-collapse");
          element.classList.toggle("collapse-sub");
      });
}
//collapse accordion

// run dropdown and tooltip functions for Virtual DOM
document.addEventListener("DOMContentLoaded", () => {    
    const triggers = [
        { event: "mouseover", checker: isHoverable },
        { event: "mouseout", checker: isHoverable },
        { event: "click", checker: isClickable },
    ];

    triggers.forEach(({ event, checker, fn }) => {
        document.addEventListener(
            event,
            (e) => {
                const dropdownToggleEl = e.target.closest(
                    "[data-dropdown-toggle]"
                );
                const tooltipToggleEl = e.target.closest(
                    "[data-tooltip-target]"
                );
                if (dropdownToggleEl !== null && event == "click") {
                    runDropdown(dropdownToggleEl);
                }

                if (tooltipToggleEl !== null && event == "mouseover") {
                  runTooltip(tooltipToggleEl);
              }
            },
            false
        );
    });
});

function isClickable(dropdownToggleEl) {
    return dropdownToggleEl.getAttribute("data-dropdown-toggle") === "click";
}

function isHoverable(tooltipToggleEl) {
    return tooltipToggleEl.getAttribute("data-tooltip-target") === "hover";
}
//run dropdown and tooltip functions for Virtual DOM

// Toggle dropdown elements using [data-dropdown-toggle]
function runDropdown(dropdownToggleEl) {
    const dropdownMenuId = dropdownToggleEl.getAttribute(
        "data-dropdown-toggle"
    );
    const dropdownMenuEl = document.getElementById(dropdownMenuId); // options

    const placement = dropdownToggleEl.getAttribute("data-dropdown-placement");

    var element = dropdownToggleEl;

    while (element.nodeName !== "BUTTON") {
        element = element.parentNode;
    }

    Popper.createPopper(element, dropdownMenuEl, {
        placement: placement ? placement : "bottom-start",
        modifiers: [
            {
                name: "offset",
                options: {
                    offset: [0, 10],
                },
            },
        ],
    }); // toggle when click on the button

    dropdownMenuEl.classList.toggle("hidden");
    dropdownMenuEl.classList.toggle("block");

    function handleDropdownOutsideClick(event) {
        var targetElement = event.target; // clicked element

        if (
            targetElement !== dropdownMenuEl &&
            targetElement !== dropdownToggleEl &&
            !dropdownToggleEl.contains(targetElement)
        ) {
            dropdownMenuEl.classList.add("hidden");
            dropdownMenuEl.classList.remove("block");
            document.body.removeEventListener(
                "click",
                handleDropdownOutsideClick,
                true
            );
        }
    } // hide popper when clicking outside the element

    document.body.addEventListener("click", handleDropdownOutsideClick, true);

    if (dropdownMenuEl.getAttribute("data-click-outside-none") != null) {
        if (event.target.getAttribute("data-click-outside") != null || event.target.parentElement.getAttribute("data-click-outside") != null) {
            dropdownMenuEl.classList.add("hidden");
            dropdownMenuEl.classList.remove("block");
            return;
        }
        dropdownMenuEl.classList.add("block");
        dropdownMenuEl.classList.remove("hidden");
    }
}
// Toggle dropdown elements using [data-dropdown-toggle]

// Tooltip elements using [data-tooltip-target], [data-tooltip-placement]
function runTooltip(tooltipToggleEl) {
    const tooltipEl = document.getElementById(
        tooltipToggleEl.getAttribute("data-tooltip-target")
    );
    const placement = tooltipToggleEl.getAttribute("data-tooltip-placement");
    const trigger = tooltipToggleEl.getAttribute("data-tooltip-trigger");
    const popperInstance = Popper.createPopper(tooltipToggleEl, tooltipEl, {
        placement: placement ? placement : "top",
        modifiers: [
            {
                name: "offset",
                options: {
                    offset: [0, 8],
                },
            },
        ],
    });

    function show() {
        // Make the tooltip visible
        tooltipEl.classList.remove("opacity-0");
        tooltipEl.classList.add("opacity-100");
        tooltipEl.classList.remove("invisible");
        tooltipEl.classList.add("visible"); // Enable the event listeners

        popperInstance.setOptions((options) => ({
            ...options,
            modifiers: [
                ...options.modifiers,
                {
                    name: "eventListeners",
                    enabled: true,
                },
            ],
        })); // Update its position

        popperInstance.update();
    }

    function hide() {
        // Hide the tooltip
        tooltipEl.classList.remove("opacity-100");
        tooltipEl.classList.add("opacity-0");
        tooltipEl.classList.remove("visible");
        tooltipEl.classList.add("invisible"); // Disable the event listeners

        popperInstance.setOptions((options) => ({
            ...options,
            modifiers: [
                ...options.modifiers,
                {
                    name: "eventListeners",
                    enabled: false,
                },
            ],
        }));
    }

    var showEvents = [];
    var hideEvents = [];

    switch (trigger) {
        case "hover":
            showEvents = ["mouseenter", "focus"];
            hideEvents = ["mouseleave", "blur"];
            break;

        case "click":
            showEvents = ["click", "focus"];
            hideEvents = ["focusout", "blur"];
            break;

        default:
            showEvents = ["mouseenter", "focus"];
            hideEvents = ["mouseleave", "blur"];
    }

    showEvents.forEach((event) => {
        tooltipToggleEl.addEventListener(event, show);
    });
    hideEvents.forEach((event) => {
        tooltipToggleEl.addEventListener(event, hide);
    });
}
// Tooltip elements using [data-tooltip-target], [data-tooltip-placement]

//Auto Height for Textarea
const tx = document.querySelectorAll('[textarea-auto-height]');
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
  tx[i].addEventListener('input', OnInput, false);
}

function OnInput() {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
}
//Auto Height for Textarea

//Loading scenario for href links
document.querySelectorAll('[data-link-loading]').forEach((href) => {
    let target_link_html = href.parentElement;
    target_link_html.classList.add('relative');

    target_link_html.addEventListener('click', function () {
        this.classList.add('disabled-link');

        this.querySelector('[data-link-spin]').classList.remove('hidden');
        this.querySelector('[data-link-text]').classList.add('opacity-0');
        this.querySelector('[data-link-text]').classList.remove('opacity-1');
    });
});
//Loading scenario for href links

//Firefox show modal for icon set
if (navigator.userAgent.search("Firefox") >= 0) {
    let firefoxCookie = document.createElement('DIV'),
    body = document.body;

    firefoxCookie.innerHTML =
    '<div tabindex="-1" role="dialog" data-cookie-modal class=" modal w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden modal-add-new fade justify-center items-start show flex flex-wrap modal-background">' +
    '   <div class="w-full my-10 m-auto flex flex-col max-w-2xl">' +
    '       <div class="modal-content">' +
    '           <div class="p-5 bg-body rounded-tl-lg rounded-tr-lg">' +
    '               <div class="flex items-center justify-between border-b pb-5">' +
    '                   Firefox Icon Configuration' +
    '               </div>' +
    '           </div>' +
    '           <div class="py-1 px-5 bg-body">' +
    '               <span class="font-medium"> If your icons not appear please; </span> <br />' +
    '               <span class="font-medium"> Please Allow pages to choose their own fonts, instead of your selections above <br/><br/> </span>' +
    '               <span class="font-bold"> Settings (Preferences) > Fonts > Advanced </span> ' +
    '           </div>' +
    '           <div class="p-5 bg-body rounded-bl-lg rounded-br-lg border-gray-300">' +
    '               <div class="flex items-center justify-end">' +
    '                   <button type="button" onClick="delete_cookie()" class="relative px-6 py-1.5 bg-green hover:bg-green-700 text-white rounded-lg disabled:bg-green-100">' +
    '                       <span class="">OK</span>' +
    '                   </button>' +
    '               </div>' +
    '           </div>' +
    '       </div>' +
    '   </div>' +
    '</div>' +

    body.appendChild(firefoxCookie);

    function delete_cookie() {
        document.cookie = 'firefoxCookieModal=true; expires=Thu, 1 Jan 2023 00:00:01 GMT;';
        document.querySelector('[data-cookie-modal]').remove();
    }

    if (document.cookie.indexOf('firefoxCookieModal=true') !== -1) {
        document.querySelector('[data-cookie-modal]').remove();
    }
}
//Firefox show modal for icon set

//margue animation for truncated text
function marqueeAnimation(truncate) {
    if (truncate.closest('[disable-marquee]') !== null) {
        truncate.parentElement.classList.add('truncate');
        truncate.closest('[disable-marquee]').setAttribute('disable-marquee', 'data-disable-marquee');
        return;
    }
    // offsetwidth = width of the text, clientWidth = width of parent text (div)
    // because some index page has icons, we use two time parent element

    if (truncate.children.length < 1 && truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.parentElement.clientWidth) {
        truncate.addEventListener('mouseover', function () {
            truncate.parentElement.style.animationPlayState = 'running';

            if (truncate.offsetWidth > 400 && truncate.parentElement.clientWidth < 150) {
                truncate.parentElement.classList.remove('animate-marquee');
                truncate.parentElement.classList.add('animate-marquee_long');
            } else {
                truncate.parentElement.classList.remove('animate-marquee_long');
                truncate.parentElement.classList.add('animate-marquee');
            }
    
            if (truncate.parentElement.classList.contains('truncate')) {
                truncate.parentElement.classList.remove('truncate');
            }
        });
    
        truncate.addEventListener('mouseout', function () {
            truncate.parentElement.style.animationPlayState = 'paused';
            truncate.parentElement.classList.remove('animate-marquee');
            truncate.parentElement.classList.remove('animate-marquee_long');
            truncate.parentElement.classList.add('truncate');
        });

        truncate.classList.add('truncate');

        // if truncate has truncate class, text marquee animate doesn't pretty work
        if (truncate.querySelector('.truncate') !== null && truncate.querySelector('.truncate').classList.contains('truncate')) {
            let old_element = truncate.querySelector('.truncate');
            let parent = old_element.parentNode;
            
            let new_element = document.createElement('span');
            new_element.innerHTML = old_element.innerHTML;
            new_element.classList = old_element.classList;

            parent.replaceChild(new_element, old_element);
        }
        // if truncate has truncate class, text marquee animate doesn't pretty work
        
        // There needs to be two div for disable/enable icons. If I don't create this div, animation will work with disable/enable icons.-->
        let animate_element = document.createElement('div');
        animate_element.classList.add('truncate');
        truncate.parentElement.append(animate_element);
        animate_element.append(truncate);
        // There needs to be two div for disable/enable icons. If I don't create this div, animation will work with disable/enable icons.-->

        //there is overflow class for the animation does not overflow the width
        truncate.parentElement.parentElement.classList.add('overflow-x-hidden');
    }
}

document.querySelectorAll('[data-truncate-marquee]').forEach((truncate) => {
    marqueeAnimation(truncate);
});

//disable/enable icons ejected from data-truncate-marquee, HTML of icons ejected from parent element (data-truncate-marquee)
document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
    let icon_parents_element = defaultText.parentElement.parentElement.parentElement;
    
    if (icon_parents_element.classList.contains('flex')) {
        icon_parents_element.appendChild(defaultText);
        icon_parents_element.classList.remove('truncate');
    } else {
        if (icon_parents_element.classList.contains('overflow-x-hidden')) {
            icon_parents_element.parentElement.appendChild(defaultText);
        } else {
            defaultText.parentElement.appendChild(defaultText);
        }
    }
});
//disable/enable icons ejected from data-truncate-marquee

//margue animation for truncated text

// set with for page header
document.querySelectorAll('[data-page-title-first]').forEach((first) => {
    document.querySelectorAll('[data-page-title-second]').forEach((second) => {
        let title_truncate = first.querySelector('[data-title-truncate]');

        if (title_truncate !== null) {
            if (first.clientWidth < title_truncate.clientWidth && second.clientHeight > 0) {
                // added specific width styling for truncate text
                title_truncate.style.width = first.clientWidth + 'px';
                let subtract = title_truncate.clientWidth - 40;
                title_truncate.style.width = subtract + 'px';
                title_truncate.classList.add('truncate');
                // added specific width styling for truncate text
    
                // added specific width styling into the parent title element for truncate text
                first.classList.add('w-full', 'sm:w-6/12');
                // added specific width styling into the parent title element for truncate text
    
                title_truncate.parentNode.classList.add('overflow-x-hidden', 'hide-scroll-bar');
        
                // added truncate animation for truncated text
                title_truncate.addEventListener('mouseover', function () {
                    this.classList.add('animate-marquee');
                    this.classList.remove('truncate');
                    this.style.animationPlayState = 'running';
                });
        
                title_truncate.addEventListener('mouseout', function () {
                    this.style.animationPlayState = 'paused';
                    this.classList.remove('animate-marquee');
                    this.classList.add('truncate');
                });
                // added truncate animation for truncated text
            }
        }

        // remove width class name for extend the right side
        first.classList.remove('w-full', 'sm:w-6/12');
        // remove width class name for extend the right side
    });
});
// set with for page header