(function (global, $) {
  //es5 strict mode
  "use strict";

  /* Script on ready
---------------------------------*/
  $(document).ready(function () {
    changeHeaderClass();
    nav();
    mobileMenu();
    sticky_menu();
    // stickyFooter();
    hoverBars();
    sliders();
    //eventMap();
    learnMoreEvents();
    joinForm();
    volunteer();
    featuredEvents();
  });

  /* Script on resize
---------------------------------*/
  $(window).resize(function () {
    changeHeaderClass();
    // adjustPopupPosition();
    learnMoreButtons();
  });

  $(document).mouseup(function (e) {});

  /* Script functions
----------------------------------*/

  // change header class
  function changeHeaderClass() {
    if ($(window).width() <= 610) {
      $("body").removeClass("is-header-desktop");
      $("body").addClass("is-header-mobile");
    } else {
      $("body").addClass("is-header-desktop");
      $("body").removeClass("is-header-mobile");
    }
  }

  // mobile menu
  function mobileMenu() {
    var level0 = $("#mobile-menu-trigger");

    level0.click(function (e) {
      if ($(this).attr("aria-expanded") == "false") {
        $("html,body").animate({ scrollTop: 0 }, 0);
        $(this).attr("aria-expanded", "true");
        $(this).attr("aria-label", "Close Menu");
        $(this).stop().addClass("is-open");
        $("#header").stop().addClass("is-mobile-open");
      } else {
        $(this).attr("aria-expanded", "false");
        $(this).attr("aria-label", "Open Menu");
        $(this).stop().removeClass("is-open");
        $("#header").stop().removeClass("is-mobile-open");
      }
    });
  }

  // nav
  function nav() {
    if ($(window).width() > 768) {
      $(".nav")
        .on("mouseenter focus", ".level-1-trigger", function (e) {
          var el = $(this);
          el.toggleClass("has-focus");
          el.parents(".has-dropdown-menu").attr("aria-expanded", "true");
          el.siblings(".dropdown-menu").attr("aria-hidden", "false");
        })
        .on("mouseleave blur", ".level-1-trigger", function (e) {
          var el = $(this);
          el.toggleClass("has-focus");
          setTimeout(function () {
            if (
              el.siblings(".dropdown-menu").attr("data-has-focus") !== "true"
            ) {
              el.parents(".has-dropdown-menu").attr("aria-expanded", "false");
              el.siblings(".dropdown-menu").attr("aria-hidden", "true");
            }
          }, 100);
        })
        .on("mouseenter focusin", ".dropdown-menu", function (e) {
          var el = $(this);
          el.attr("data-has-focus", "true");
          el.attr("aria-hidden", "false");
        })
        .on("mouseleave focusout", ".dropdown-menu", function (e) {
          var el = $(this);
          setTimeout(function () {
            if (el.find(":focus").length === 0) {
              el.attr("data-has-focus", "false");
              el.attr("aria-hidden", "true");
              if (el.siblings(".level-1-trigger.has-focus").length === 0) {
                el.parents(".has-dropdown-menu").attr("aria-expanded", "false");
                el.siblings(".dropdown-menu").attr("aria-hidden", "true");
              }
            }
          }, 100);
        });
    }
  }

  function sticky_menu() {
    var stickyHeader = $("#header");
    var body = $("body");
    let hOffset = "";
    if ($(window).width() > 610) {
      hOffset = "-105";
    } else {
      hOffset = "-70";
    }
    if (stickyHeader.length) {
      stickyHeader.wrap('<div class="menu-sticky-node-wrapper">');
      var wrapper = stickyHeader.parent();
      wrapper.waypoint(
        function (direction) {
          if (direction == "down") {
            body.addClass("header-fixed");
            stickyHeader.addClass("is-fixed");
          } else {
            body.removeClass("header-fixed");
            stickyHeader.removeClass("is-fixed");
          }
        },
        {
          offset: hOffset,
        }
      );
    }
  }

  // footer
  function stickyFooter() {
    var ww = $(window).width();
    var Stickyfooter = $("footer").outerHeight();
    $("#wrapper").css("margin-bottom", -Stickyfooter);
    $("#wrapper").css("padding-bottom", Stickyfooter);
  }

  function hoverBars() {
    var parent = $(".hover-bars");
    var bar = $(".hover-bars .bars .bar");
    var panel = $(".hover-bars .info .panel");
    var mobilePanel = $(".hover-bars .bars .mobile-panel");
    if ($(window).width() > 677) {
      bar.on("click", function () {
        var relPanelId = $(this).attr("data-panel");
        var relPanelEl = $("#" + relPanelId);
        if ($(this).attr("aria-expanded") === "false") {
          parent.addClass("panel-open");
          bar.not(this).attr("aria-expanded", "false");
          $(this).attr("aria-expanded", "true");
          panel.not(relPanelEl).attr("aria-hidden", "true");
          relPanelEl.attr("aria-hidden", "false");
        } else {
          parent.removeClass("panel-open");
          $(this).attr("aria-expanded", "false");
          relPanelEl.attr("aria-hidden", "true");
        }
      });
    } else {
      bar.on("click", function () {
        var relPanelId = $(this).attr("data-panel");
        var relPanelEl = $("#mobile-" + relPanelId);
        if ($(this).attr("aria-expanded") === "false") {
          bar.not(this).attr("aria-expanded", "false");
          $(this).attr("aria-expanded", "true");
          mobilePanel.not(relPanelEl).attr("aria-hidden", "true");
          relPanelEl.attr("aria-hidden", "false");
        } else {
          $(this).attr("aria-expanded", "false");
          relPanelEl.attr("aria-hidden", "true");
        }
      });
    }
  }

  // sliders
  function sliders() {
    var videoSlider = new Swiper(".video-slider", {
      spaceBetween: 0,
      watchSlidesVisibility: true,
      slideToClickedSlide: true,
      simulateTouch: false,
      navigation: {
        nextEl: ".vid-button-next",
        prevEl: ".vid-button-prev",
      },
      breakpoints: {
        0: {
          slidesPerView: 1,
          loop: false,
          centeredSlides: false,
        },
        677: {
          slidesPerView: 3,
          loop: true,
          centeredSlides: true,
        },
      },
    });
    var learnMoreSlider = new Swiper(".learn-more-slider", {
      spaceBetween: 30,
      watchSlidesVisibility: true,
      slideToClickedSlide: true,
      simulateTouch: false,
      navigation: {
        nextEl: ".lm-slider-next",
        prevEl: ".lm-slider-prev",
      },
      breakpoints: {
        0: {
          slidesPerView: 1,
          loop: false,
          centeredSlides: false,
        },
        500: {
          slidesPerView: 2,
          loop: false,
          centeredSlides: false,
        },
        768: {
          slidesPerView: 3,
          loop: true,
          centeredSlides: false,
        },
      },
    });
  }

  async function fetchData(url) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error("Network response was not ok " + response.statusText);
      }
      const data = await response.json();
      return data;
    } catch (error) {
      console.error("There was a problem with the fetch operation:", error);
    }
  }

  let USMapStates = [
    {
      "hc-key": "us-de",
      value: 0,
      eventsCount: 0,
      defaultLat: '38.9108',
      defaultLong: '-75.5277',
    },
    {
      "hc-key": "us-al",
      value: 0,
      eventsCount: 0,
      defaultLat: '32.3182',
      defaultLong: '-86.9023',
    },
    {
      "hc-key": "us-la",
      value: 0,
      eventsCount: 0,
      defaultLat: '30.5191',
      defaultLong: '-91.5209',
    },
    {
      "hc-key": "us-ne",
      value: 0,
      eventsCount: 0,
      defaultLat: '41.4925',
      defaultLong: '-99.9018',
    },
    {
      "hc-key": "us-or",
      value: 0,
      eventsCount: 0,
      defaultLat: '43.8041',
      defaultLong: '-120.5542',
    },
    {
      "hc-key": "us-wa",
      value: 0,
      eventsCount: 0,
      defaultLat: '47.7511',
      defaultLong: '-120.7401',
    },
    {
      "hc-key": "us-wy",
      value: 0,
      eventsCount: 0,
      defaultLat: '43.0760',
      defaultLong: '-107.2903',
    },
    {
      "hc-key": "us-hi",
      value: 0,
      eventsCount: 0,
      defaultLat: '19.8987',
      defaultLong: '-155.6659',
    },
    {
      "hc-key": "us-mt",
      value: 0,
      eventsCount: 0,
      defaultLat: '46.8797',
      defaultLong: '-110.3626',
    },
    {
      "hc-key": "us-ny",
      value: 0,
      eventsCount: 0,
      defaultLat: '40.7128',
      defaultLong: '-74.0060',
    },
    {
      "hc-key": "us-ia",
      value: 0,
      eventsCount: 0,
      defaultLat: '41.8780',
      defaultLong: '-93.0977',
    },
    {
      "hc-key": "us-ks",
      value: 0,
      eventsCount: 0,
      defaultLat: '39.0119',
      defaultLong: '-98.4842',
    },
    {
      "hc-key": "us-nh",
      value: 0,
      eventsCount: 0,
      defaultLat: '43.1939',
      defaultLong: '-71.5724',
    },
    {
      "hc-key": "us-oh",
      value: 0,
      eventsCount: 0,
      defaultLat: '40.4173',
      defaultLong: '-82.9071',
    },
    {
      "hc-key": "us-ok",
      value: 0,
      eventsCount: 0,
      defaultLat: '35.0078',
      defaultLong: '-97.0929',
    },
    {
      "hc-key": "us-az",
      value: 0,
      eventsCount: 0,
      defaultLat: '34.0489',
      defaultLong: '-111.0937',
    },
    {
      "hc-key": "us-ar",
      value: 0,
      eventsCount: 0,
      defaultLat: '35.2010',
      defaultLong: '-91.8318',
    },
    {
      "hc-key": "us-ca",
      value: 0,
      eventsCount: 0,
      defaultLat: '36.7783',
      defaultLong: '-119.4179',
    },
    {
      "hc-key": "us-ky",
      value: 0,
      eventsCount: 0,
      defaultLat: '37.8393',
      defaultLong: '-184.2700',
    },
    {
      "hc-key": "us-ma",
      value: 0,
      eventsCount: 0,
      defaultLat: '42.4072',
      defaultLong: '-71.3824',
    },
    {
      "hc-key": "us-mn",
      value: 0,
      eventsCount: 0,
      defaultLat: '46.7296',
      defaultLong: '-94.6859',
    },
    {
      "hc-key": "us-ri",
      value: 0,
      eventsCount: 0,
      defaultLat: '41.5801',
      defaultLong: '-71.4774',
    },
    {
      "hc-key": "us-ut",
      value: 0,
      eventsCount: 0,
      defaultLat: '40.9581',
      defaultLong: '-112.2146',
    },
    {
      "hc-key": "us-ct",
      value: 0,
      eventsCount: 0,
      defaultLat: '41.6032',
      defaultLong: '-73.0877',
    },
    {
      "hc-key": "us-ga",
      value: 0,
      eventsCount: 0,
      defaultLat: '32.1574',
      defaultLong: '-82.9071',
    },
    {
      "hc-key": "us-in",
      value: 0,
      eventsCount: 0,
      defaultLat: '40.5512',
      defaultLong: '-85.6024',
    },
    {
      "hc-key": "us-mo",
      value: 0,
      eventsCount: 0,
      defaultLat: '37.9643',
      defaultLong: '-91.8318',
    },
    {
      "hc-key": "us-nv",
      value: 0,
      eventsCount: 0,
      defaultLat: '38.8026',
      defaultLong: '-116.4194',
    },
    {
      "hc-key": "us-nm",
      value: 0,
      eventsCount: 0,
      defaultLat: '34.9727',
      defaultLong: '-105.0324',
    },
    {
      "hc-key": "us-nc",
      value: 0,
      eventsCount: 0,
      defaultLat: '35.7596',
      defaultLong: '-79.0193',
    },
    {
      "hc-key": "us-nd",
      value: 0,
      eventsCount: 0,
      defaultLat: '47.5515',
      defaultLong: '-101.0020',
    },
    {
      "hc-key": "us-pa",
      value: 0,
      eventsCount: 0,
      defaultLat: '41.2033',
      defaultLong: '-77.1945',
    },
    {
      "hc-key": "us-dc",
      value: 0,
      eventsCount: 0,
      defaultLat: '38.9072',
      defaultLong: '-77.0369',
    },
    {
      "hc-key": "us-ak",
      value: 0,
      eventsCount: 0,
      defaultLat: '63.5888',
      defaultLong: '-154.4931',
    },
    {
      "hc-key": "us-vt",
      value: 0,
      eventsCount: 0,
      defaultLat: '44.5588',
      defaultLong: '-72.5778',
    },
    {
      "hc-key": "us-co",
      value: 0,
      eventsCount: 0,
      defaultLat: '39.5501',
      defaultLong: '-105.7821',
    },
    {
      "hc-key": "us-il",
      value: 0,
      eventsCount: 0,
      defaultLat: '40.6331',
      defaultLong: '-89.3985',
    },
    {
      "hc-key": "us-me",
      value: 0,
      eventsCount: 0,
      defaultLat: '45.2538',
      defaultLong: '-69.4455',
    },
    {
      "hc-key": "us-mi",
      value: 0,
      eventsCount: 0,
      defaultLat: '43.6875',
      defaultLong: '-84.9689',
    },
    {
      "hc-key": "us-sd",
      value: 0,
      eventsCount: 0,
      defaultLat: '43.9695',
      defaultLong: '-99.9018',
    },
    {
      "hc-key": "us-tx",
      value: 0,
      eventsCount: 0,
      defaultLat: '31.9686',
      defaultLong: '-99.9018',
    },
    {
      "hc-key": "us-fl",
      value: 0,
      eventsCount: 0,
      defaultLat: '27.6648',
      defaultLong: '-81.5158',
    },
    {
      "hc-key": "us-wv",
      value: 0,
      eventsCount: 0,
      defaultLat: '38.5976',
      defaultLong: '-80.4549',
    },
    {
      "hc-key": "us-wi",
      value: 0,
      eventsCount: 0,
      defaultLat: '44.9591',
      defaultLong: '-89.6301',
    },
    {
      "hc-key": "us-id",
      value: 0,
      eventsCount: 0,
      defaultLat: '44.0682',
      defaultLong: '-114.7420',
    },
    {
      "hc-key": "us-md",
      value: 0,
      eventsCount: 0,
      defaultLat: '39.0458',
      defaultLong: '-76.6413',
    },
    {
      "hc-key": "us-ms",
      value: 0,
      eventsCount: 0,
      defaultLat: '32.3547',
      defaultLong: '-89.3985',
    },
    {
      "hc-key": "us-nj",
      value: 0,
      eventsCount: 0,
      defaultLat: '40.0583',
      defaultLong: '-74.4057',
    },
    {
      "hc-key": "us-sc",
      value: 0,
      eventsCount: 0,
      defaultLat: '33.8361',
      defaultLong: '-81.1637',
    },
    {
      "hc-key": "us-tn",
      value: 0,
      eventsCount: 0,
      defaultLat: '35.5175',
      defaultLong: '-86.5804',
    },
    {
      "hc-key": "us-va",
      value: 0,
      eventsCount: 0,
      defaultLat: '37.4316',
      defaultLong: '-78.6569',
    },
  ];

  let statesCodeNames = [
    { code: "al", name: "Alabama" },
    { code: "ak", Pennsylvanianame: "Alaska" },
    { code: "az", name: "Arizona" },
    { code: "ar", name: "Arkansas" },
    { code: "ca", name: "California" },
    { code: "co", name: "Colorado" },
    { code: "ct", name: "Connecticut" },
    { code: "de", name: "Delaware" },
    { code: "fl", name: "Florida" },
    { code: "ga", name: "Georgia" },
    { code: "hi", name: "Hawaii" },
    { code: "id", name: "Idaho" },
    { code: "il", name: "Illinois" },
    { code: "in", name: "Indiana" },
    { code: "ia", name: "Iowa" },
    { code: "ks", name: "Kansas" },
    { code: "ky", name: "Kentucky" },
    { code: "la", name: "Louisiana" },
    { code: "me", name: "Maine" },
    { code: "md", name: "Maryland" },
    { code: "ma", name: "Massachusetts" },
    { code: "mi", name: "Michigan" },
    { code: "mn", name: "Minnesota" },
    { code: "ms", name: "Mississippi" },
    { code: "mo", name: "Missouri" },
    { code: "mt", name: "Montana" },
    { code: "ne", name: "Nebraska" },
    { code: "nv", name: "Nevada" },
    { code: "nh", name: "New Hampshire" },
    { code: "nj", name: "New Jersey" },
    { code: "nm", name: "New Mexico" },
    { code: "ny", name: "New York" },
    { code: "nc", name: "North Carolina" },
    { code: "nd", name: "North Dakota" },
    { code: "oh", name: "Ohio" },
    { code: "ok", name: "Oklahoma" },
    { code: "or", name: "Oregon" },
    { code: "pa", name: "Pennsylvania" },
    { code: "ri", name: "Rhode Island" },
    { code: "sc", name: "South Carolina" },
    { code: "sd", name: "South Dakota" },
    { code: "tn", name: "Tennessee" },
    { code: "tx", name: "Texas" },
    { code: "ut", name: "Utah" },
    { code: "vt", name: "Vermont" },
    { code: "va", name: "Virginia" },
    { code: "wa", name: "Washington" },
    { code: "wv", name: "West Virginia" },
    { code: "wi", name: "Wisconsin" },
    { code: "wy", name: "Wyoming" },
  ];

  USMapStates = USMapStates.map((state) => ({
    ...state,
    id: state["hc-key"],
  }));

  let eventMapChart;
  let perStateEvents = [];

  async function eventMap() {
    if ($("section.upcoming-events").length == 0) {
      return;
    }

    const dataFeedURL = "https://rne.campaignnucleus.com/feeds/events";
    const dataFeedURL2 = "https://rnp.campaignnucleus.com/feeds/events";
    const dataFeedURL3 = "https://djt.campaignnucleus.com/feeds/events";
    const eventsData = await fetchData(dataFeedURL);
    const events2Data = await fetchData(dataFeedURL2);
    const events3Data = await fetchData(dataFeedURL3);
    const combinedEventsData = {
      data: [...eventsData.data, ...events2Data.data, ...events3Data.data],
    };
    const parsedEventsData = combinedEventsData.data.map((event, index) => {
      let lat, lon;

      lat = parseFloat(combinedEventsData.data[index].location_lat);
      lon = parseFloat(combinedEventsData.data[index].location_long);

      return {
        eventName: event.label,
        lat: lat,
        lon: lon,
        url: event.url_public,
        cityState:
          event.location_city.toUpperCase() +
          ", " +
          event.location_state.toUpperCase(),
        stateCode: event.location_state,
        date: new Date(event.starts_at).toLocaleDateString("en-US", {
          month: "long",
          day: "numeric",
          year: "numeric",
        }),
        time: new Date(event.starts_at).toLocaleTimeString([], {
          hour: "2-digit",
          minute: "2-digit",
        }),
        timezone: event.timezone,
        venue: event.location_name,
        description: event.description,
        value: 1,
      };
    });

    const trumpForceDataFeedURL = "https://app.trumpforce47.com/events-json";
    const trumpForceEventsData = await fetchData(trumpForceDataFeedURL);

    if (trumpForceEventsData) {

      const d = new Date();
      const localTime = d.getTime();
      const localOffset = d.getTimezoneOffset() * 60000;
      const utc = localTime + localOffset;
      const offset = -5;
      const usa = utc + (3600000 * offset);
      const usaTimeNow = new Date(usa);

      trumpForceEventsData.filter(event => new Date(`${event.start_date} ${event.end_time}`) > usaTimeNow)

      const parsedTrumpForceEventsData = trumpForceEventsData
      .filter(event => new Date(`${event.start_date} ${event.end_time}`) > usaTimeNow)
      .map(event => {
        const codeName = statesCodeNames.find(state => state.name === event.states);
        let location = '';
        if (codeName) {
          location = USMapStates.find(state => state['hc-key'] === `us-${codeName.code}`);
        }
        const maxLatLongOffset = .8;
        const lat = randomizeLatLong(parseFloat(location.defaultLat), maxLatLongOffset);
        const long = randomizeLatLong(parseFloat(location.defaultLong), maxLatLongOffset);

        function randomizeLatLong(number, maxOffset) {
          let randomOffset = (Math.random() * 2 - 1) * maxOffset;
          return (number + randomOffset).toFixed(4);
        }
  
        return {
          eventName: event.title,
          lat: parseFloat(lat),
          lon: parseFloat(long),
          url: event.event_url,
          cityState: codeName ? event.states + ', ' + codeName.code.toUpperCase() : event.states,
          stateCode: codeName ? codeName.code : '',
          date: event.start_date,
          time: event.start_time,
          venue: event.venue_name,
          description: event.description,
          timezone: event.timezone,
          value: 1
        }
      });
      parsedEventsData.push(...parsedTrumpForceEventsData);
    }

    let stateEventMap = {};

    parsedEventsData.forEach((event) => {
      const stateCode = event.stateCode.toLowerCase();
      const tempEntry = USMapStates.find(
        (entry) => entry["hc-key"].toLowerCase() === `us-${stateCode}`
      );

      if (tempEntry) {
        tempEntry.eventsCount += 1;
        tempEntry.value += event.value;
      }

      // perState Events
      let state = event.stateCode.toLowerCase();
      if (!stateEventMap[state]) {
        stateEventMap[state] = {
          state: state,
          events: [],
        };
      }
      stateEventMap[state].events.push(event);
    });

    perStateEvents = Object.values(stateEventMap);

    eventMapChart = Highcharts.mapChart("events-map-chart", {
      chart: {
        map: "countries/us/us-all",
        events: {
          load: function() {
            $('.events-map-chart__loading').hide();
            adjustPopupPosition();



            const chart = this;
            let zoomTimeout;

            chart.update({
              plotOptions: {
                series: {
                  events: {
                    render: function () {
                      clearTimeout(zoomTimeout);
                      zoomTimeout = setTimeout(() => {
                        if (chart.series[1].cluster) {
                          chart.series[1].cluster.update();
                        }
                      }, 200);
                    }
                  }
                }
              }
            });
          },
          redraw: function() {
            $('.highcharts-cluster-point').hover(
              function() {
                $('.highcharts-tooltip').hide();
              },
              function() {
                $('.highcharts-tooltip').show();
              }
            );
          }
        }
      },
      title: {
        text: "",
      },
      mapNavigation: {
        enabled: true,
        buttonOptions: {
          verticalAlign: "bottom",
          align: "right",
        },
      },
      legend: {
        enabled: false,
      },
      tooltip: {
        enabled: true,
        useHTML: true,
        pointFormatter: function () {
          if (this.eventsCount !== undefined) {
            const stateFullName = this.name;
            const stateToolTip = `
              <p class="custom-tooltip__state-name">${stateFullName}<p>
              ${
                this.eventsCount === 0
                  ? "No Events Currently Scheduled"
                  : `${this.eventsCount} events in the next month`
              }
            `;

            return stateToolTip;
          } else {
            const stateToolTip = `
              <p class="custom-tooltip__event-name">${this.eventName}<p>
            `;

            return stateToolTip;
          }
        },
      },
      series: [
        {
          name: "Basemap",
          borderColor: "#FFFFFF",
          color: "#dcddde",
          nullColor: "#dcddde",
          showInLegend: false,
          states: {
            hover: {
              color: "#dc2633",
            },
          },
          data: USMapStates,
          zIndex: 1,
        },
        {
          type: "mappoint",
          name: "Upcoming Events",
          data: parsedEventsData,
          states: {
            hover: {
              brightness: 0,
            },
          },
          cursor: "pointer",
          marker: {
            symbol: "circle",
            radius: 6,
            fillColor: "#213875",
          },
          cluster: {
            enabled: true,
            allowOverlap: false,
            layoutAlgorithm: {
              type: 'grid',
              gridSize: 80,
            },
            marker: {
              symbol: 'circle',
              fillColor: '#213875',
              radius: 15,
            },
            animation: false,
            zones: [{
              from: 1,
              to: 5,
              marker: {
                radius: 15,
                fillColor: '#213875'
              }
            }, {
              from: 6,
              to: 20,
              marker: {
                radius: 17,
                fillColor: '#213875'
              }
            }, {
              from: 21,
              to: 1000,
              marker: {
                radius: 20,
                fillColor: '#213875'
              }
            }]
          },
          point: {
            events: {
              click: function () {
                if (!this.eventName) {
                  return;
                }

                const popup = $("#popup");
                const $eventsMapChart = $("#events-map-chart");
                const offset = $eventsMapChart.offset();
                const height = $eventsMapChart.outerHeight();
                const popupHeight = popup.outerHeight();
                const popupHeightValue = {
                  height: popupHeight > height ? height : "unset",
                };
                const timezoneHTML = this.timezone ? `<p class="event__time">${this.timezone}</p>` : '';
                const descriptionHTML = this.description ? `<p class="event__description">${this.description}</p>` : '';

                popup.html(`
                <button class="event__close-btn">×</button>
                <h2 class="event__event">${this.eventName}</h2>
                <h4 class="event__city-state">${this.cityState}</h4>
                <p class="event__date">${this.date}</p>
                <p class="event__time">${this.time}</p>
                ${timezoneHTML}
                <p class="event__venue">${this.venue}</p>
                ${descriptionHTML}
                <a class="event__link"href="${
                  this.url
                }" target="_blank">Get Tickets</a>
              `);

                popup.css({
                  display: "block",
                  top: offset.top,
                  left: offset.left,
                  ...popupHeightValue,
                });

                const isActive = popup.css("display") === "block";

                if (isActive) {
                  $(".highcharts-point.active-event-dot").removeClass(
                    "active-event-dot"
                  );
                  $(`.highcharts-map-series path`).css({
                    fill: "",
                  });
                  this.graphic.addClass("active-event-dot");

                  $(
                    `.highcharts-map-series path:not(.highcharts-key-us-${this.stateCode})`
                  ).css({
                    fill: "#edeeee",
                  });
                } else {
                  this.graphic.removeClass("active-event-dot");
                }

                const stateCode = this.stateCode.toLowerCase();

                const currentStateBoundary =
                  eventMapChart.series[0].points.find((state) =>
                    state["hc-key"].includes(`us-${stateCode.toLowerCase()}`)
                  );
                const stateXCenter = currentStateBoundary.bounds.midX;
                const stateYCenter = currentStateBoundary.bounds.midY;
                const stateWidthHeight = Math.max(
                  currentStateBoundary.bounds.x2 -
                    currentStateBoundary.bounds.x1,
                  currentStateBoundary.bounds.y2 -
                    currentStateBoundary.bounds.y1
                );
                const zoomValue = stateWidthHeight / 10000 + 0.1;

                eventMapChart.mapZoom(100);
                eventMapChart.mapZoom(zoomValue, stateXCenter, stateYCenter);
              },
            },
          },
          zIndex: 2,
        },
      ],
    });

    const screenWidth = window.innerWidth;

    if (screenWidth < 768) {
      eventMapChart.series[1].update(
        {
          marker: {
            radius: 7,
            symbol: "circle",
            fillColor: "#213875",
          },
        },
        false
      );
      eventMapChart.redraw();
    }

    $(document).on("click", function (event) {
      const popup = $("#popup");
      const statePopup = $("#state-info-popup");
      const popupCloseButton = $(event.target).closest('.event__close-btn');
      const isClickInsidePopup = popup.has(event.target).length > 0 && popupCloseButton.length === 0;
      const isClickOnEventDot = $(event.target).hasClass("highcharts-point");
      const isClickOnSelect =
        $(event.target).closest(".learn-more__select").length > 0;
      const statePopupCloseButton = $(event.target).closest('.state-info-popup__close-btn');
      const isClickOnStatePopup = statePopup.has(event.target).length > 0 && statePopupCloseButton.length === 0;

      if (
        !isClickInsidePopup &&
        !isClickOnEventDot &&
        !isClickOnSelect &&
        !isClickOnStatePopup
      ) {
        popup.hide();
        statePopup.hide();

        $(".highcharts-point.active-event-dot").removeClass("active-event-dot");
        $(`.highcharts-map-series path`).css({
          fill: "",
        });
      }
    });

    $(".highcharts-map-series path.highcharts-point").on(
      "click",
      function (event) {
        const clickedElement = $(this);
        const allClasses = clickedElement.attr("class").split(" ");
        const matchingClass = allClasses.find((className) =>
          className.startsWith("highcharts-key-us-")
        );

        if (!matchingClass) {
          return;
        }

        const stateName = matchingClass
          ? matchingClass.replace("highcharts-key-us-", "")
          : null;

        focusOnState(stateName);
      }
    );

    $(".featured-events__select").change(function () {
      const selectedState = $(this).val();

      focusOnState(selectedState);
    });

    $(".featured-events__custom-select__options span").click(function () {
      const selectedStateValue = $(this).attr('data-value');
      const selectedStateText = $(this).text();

      $('.featured-events__custom-select .selected-option').text(selectedStateText);
      $('.featured-events__custom-select .selected-option').attr('data-value', selectedStateValue);
      $('.featured-events__custom-select__options span.active').removeClass('active');
      $(".featured-events__custom-select__options").hide();
      $(this).addClass('active');

      focusOnState(selectedStateValue);
    });

    $(".featured-events__custom-select").click(function() {
      $(".featured-events__custom-select__options").toggle();
    });

    $('.highcharts-cluster-point').hover(
      function() {
        $('.highcharts-tooltip').hide();
      },
      function() {
        $('.highcharts-tooltip').show();
      }
    );

    function focusOnState(selectedState) {
      if (selectedState === "all") {
        $(`.highcharts-map-series path`).css({
          fill: "",
        });
        eventMapChart.mapZoom(100);

        return;
      }

      $(`.highcharts-map-series path`).css({
        fill: "",
      });

      $(
        `.highcharts-map-series path:not(.highcharts-key-us-${selectedState})`
      ).css({
        fill: "#edeeee",
      });

      const currentStateBoundary = eventMapChart.series[0].points.find(
        (state) => state["hc-key"].includes(`us-${selectedState.toLowerCase()}`)
      );
      const stateXCenter = currentStateBoundary.bounds.midX;
      const stateYCenter = currentStateBoundary.bounds.midY;
      const stateWidthHeight = Math.max(
        currentStateBoundary.bounds.x2 - currentStateBoundary.bounds.x1,
        currentStateBoundary.bounds.y2 - currentStateBoundary.bounds.y1
      );
      const zoomValue = stateWidthHeight / 10000 + 0.1;

      eventMapChart.mapZoom(100);
      eventMapChart.mapZoom(zoomValue, stateXCenter, stateYCenter);

      showStatePopup(selectedState);
    }
  }

  const showStatePopup = (selectedState) => {
    const activeState = perStateEvents.find(
      (state) => state.state === selectedState
    );
    if (perStateEvents.length === 0 || !activeState) {
      $("#state-info-popup").hide();
      return;
    }

    const activeStateEventsHTML = activeState.events.map((stateEvents) => {
      return `
      <div class="state-info-popup__list-item">
        <h3>${stateEvents.eventName}</h3>
        <p>${stateEvents.cityState}</p>
        <p>${stateEvents.date} | ${stateEvents.time}</p>
        <a href="${stateEvents.url}" target="_blank">More Info</a>
      </div>
    `;
    });

    const stateName = statesCodeNames.find(
      (codeName) => codeName.code === activeState.state
    );

    const statePopupHTML = `
      <button class="state-info-popup__close-btn">×</button>
      <h2 class="state-info-popup__title">${stateName.name}</h2>
      <div class="state-info-popup__events-listing">
        ${activeStateEventsHTML.join("")}
      </div>
    `;

    $("#state-info-popup").html(statePopupHTML);
    adjustPopupPosition();
    $("#state-info-popup").show();
  };

  const defaultCarouselSettings = {
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    adaptiveHeight: true,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  };

  const initializeCarousel = (carouselParentElement, carouselSettings) => {
    carouselParentElement.on("init", (event, slick) => {
      if (
        carouselParentElement[0].classList.contains("banner-list") &&
        slick.$slides.length <= 1
      ) {
        $(".banner .banner-prev").addClass("hidden");
        $(".banner .banner-next").addClass("hidden");
      }

      if (
        carouselParentElement[0].classList.contains("carousel-listing") &&
        slick.$slides.length <= 1
      ) {
        $(".carousel .carousel-prev").addClass("hidden");
        $(".carousel .carousel-next").addClass("hidden");
      }

      learnMoreButtons();
    });

    carouselParentElement.slick(
      carouselSettings ? carouselSettings : defaultCarouselSettings
    );
  };

  async function learnMoreEvents() {
    if ($("section.learn-more").length === 0) {
      return;
    }

    const carouselParent = $(".learn-more__listing-body ul");
    initializeCarousel(carouselParent);

    $(".learn-more__listing-body__prev").click(() => {
      carouselParent.slick("slickPrev");
    });

    $(".learn-more__listing-body__next").click(() => {
      carouselParent.slick("slickNext");
    });
  }

  function learnMoreButtons() {
    const prevButton = $('.learn-more__listing-body__prev');
    const nextButton = $('.learn-more__listing-body__next');
    const carouselItems = $('.learn-more__listing-body .slick-track li').length;

    let showButton = true;

    if ($(window).innerWidth() > 1024) {
      if (carouselItems > 3) {
        showButton = true;
      } else {
        showButton = false;
      }
    } else if ($(window).innerWidth() > 768) {
      if (carouselItems > 2) {
        showButton = true;
      } else {
        showButton = false;
      }
    } else {
      if (carouselItems > 1) {
        showButton = true;
      } else {
        showButton = false;
      }
    }

    if (showButton) {
      prevButton.show();
      nextButton.show();
    } else {
      prevButton.hide();
      nextButton.hide();
    }
  }

  function joinForm() {
    if ($(".join-form .join-form__form").length < 1) {
      return;
    }

    const iconForCheckboxes = [
      `<i class="fa-sharp fa-regular fa-clipboard"></i>`,
      `<i class="fa-solid fa-phone"></i>`,
      `<i class="fa-solid fa-eye"></i>`,
      `<i class="fa-solid fa-plane"></i>`,
      `<i class="fa-solid fa-party-horn"></i>`,
      `<i class="fa-sharp fa-solid fa-sign-posts"></i>`,
    ];

    $(".join-form .join-form__form .dform_checkbox ul.checkboxes label").each(
      function (index) {
        const currentHTML = $(this).html();
        const updatedHtmlContent = currentHTML.replace(/&nbsp;/g, " ");

        $(this).html(`
      <div class="input-header">
        ${iconForCheckboxes[index]}
        <i class="check-mark fa-duotone fa-check"></i>
      </div>
      ${updatedHtmlContent}
    `);
      }
    );

    $(".join-form .join-form__form .dform_checkbox ul.checkboxes li").on(
      "click",
      function () {
        const isChecked = $(this).find("input").prop("checked") === true;

        if (isChecked) {
          $(this).find("input").prop("checked", false);
          $(this).removeClass("--selected");
        } else {
          $(this).find("input").prop("checked", true);
          $(this).addClass("--selected");
        }
      }
    );
  }

  function volunteer() {
    if (
      document.location.pathname !== "/root-test/" &&
      document.location.pathname !== "/"
    ) {
      return;
    }

    if (document.location.hash === "#volunteer") {
      $("#form-top").animatescroll();
    }
  }

  function featuredEvents() {
    if ($("section.featured-events").length === 0) {
      return;
    }

    const checkInterval = setInterval(function () {
      if (typeof window.eventsChartObj !== "undefined" && window.eventsChartObj !== null) {
        generateFeaturedEventsListing();
        clearInterval(checkInterval);
      }
    }, 100);

    function convertDateTimeToTimezone(dateString, timeZone, isDate = true) {
      const utcDate = new Date(dateString);

      if (isDate) {
        return utcDate.toLocaleDateString("en-US", {
          month: "long",
          day: "numeric",
          year: "numeric",
          timeZone: timeZone, // Use the provided time zone
        });
      } else {
        return utcDate.toLocaleTimeString("en-US", {
          hour: "2-digit",
          minute: "2-digit",
          timeZone: timeZone, // Use the provided time zone
        });
      }
    }

    async function generateFeaturedEventsListing() {
      const dataFeedURL = "https://djt.campaignnucleus.com/feeds/events";
      const eventsData = await fetchData(dataFeedURL);
      const combinedEventsData = {
        data: [...eventsData.data],
      };
      let parsedEventsData = combinedEventsData.data.map((event, index) => {
        let lat, lon;
  
        lat = parseFloat(combinedEventsData.data[index].location_lat);
        lon = parseFloat(combinedEventsData.data[index].location_long);

        return {
          eventName: event.label,
          url: event.url_public,
          cityState:
            event.location_city +
            ", " +
            event.location_state.toUpperCase(),
          stateCode: event.location_state,
          date: convertDateTimeToTimezone(event.starts_at, event.timezone),
          time: convertDateTimeToTimezone(event.starts_at, event.timezone, false),
          timezone: event.timezone,
          featured: event.featured,
          value: 1,
        };
      });

      parsedEventsData = parsedEventsData.filter(function(event) {
        return event.featured === true;
      });

      let listingHTML = '';

      /* TODO: ADD THIS AGAIN */
      /*
        <div class="featured-state">
            ${getSVGHTML(`us-${event.stateCode}`)}
        </div>
      */
      listingHTML += parsedEventsData.map(event => {
        return `<a class="featured-events__listing-body__item" href="${event.url}" target="_blank">
          <div class="featured-state">
            ${getSVGHTML(`us-${event.stateCode}`)}
          </div>
          <div class="featured-body">
            <h2 class="featured-body__title">${event.eventName}</h2>
            <p class="featured-body__date-time">${event.date} | ${event.time}</p>
            <p class="featured-body__date-time">${event.timezone}</p>
            <div class="featured-body__pills">
              <span class="pill-red">Featured</span>
              <span class="pill-blue">${event.cityState}</span>
            </div>
          </div>
          <div class="featured-button"><p></p></div>
        </a>`
      });

      $('.featured-events__listing-body').html(listingHTML);
    }

    function getSVGHTML(stateID) {
      // const point = window.eventsChartObj.get(stateID);
      const point = window.eventsChartObj.series[0].data.filter(state => state.drilldown === stateID)[0]
      if (point) {
        const svgViewBox = [
          point.bounds.x1,
          point.bounds.y1,
          point.bounds.x2 - point.bounds.x1,
          point.bounds.y2 - point.bounds.y1,
        ];

        return `
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="${svgViewBox.join(' ')}">'
            '<path d="${point.graphic.d}" fill="#dc2633" />'
          '</svg>
        `;
      }
    }
  }

  function adjustPopupPosition() {
    if ($("section.upcoming-events").length === 0) {
      return;
    }

    const popup = $("#popup");
    const stateInfoPopup = $("#state-info-popup");
    const $eventsMapChart = $("#events-map-chart");
    const offset = $eventsMapChart.offset();
    const height = $eventsMapChart.outerHeight();
    const popupHeight = popup.outerHeight();
    const popupHeightValue = {
      height: height,
    };

    popup.css({
      top: offset.top,
      left: offset.left,
      ...popupHeightValue,
    });

    stateInfoPopup.css({
      top: offset.top,
      right: offset.left,
    });
  }
})(window, jQuery);