'use strict';

let controller = null;
let selectedSites = [];
let keyword;
let map;
let markersArray = [];
let activeWindow;
let monday, tuesday, wednesday, thursday, friday, saturday, sunday;
let morning, midday, afternoon, evening, all_day;
let date_check, time_check, date_input, time_input;
let userAddress, userAddress_Lat, userAddress_Lon, userRange;
let uuid = null;
let uip = null;
let ulat = null;
let ulon = null;
let ulang = null;
let logTimer;

function getInputs() {
   keyword = $('#keyword_input').val();
   monday = $('#check_dm').is(':checked');
   tuesday = $('#check_dtu').is(':checked');
   wednesday = $('#check_dw').is(':checked');
   thursday = $('#check_dth').is(':checked');
   friday = $('#check_df').is(':checked');
   saturday = $('#check_dsa').is(':checked');
   sunday = $('#check_dsu').is(':checked');

   morning = $('#check_tmo').is(':checked');
   midday = $('#check_tmi').is(':checked');
   afternoon = $('#check_taf').is(':checked');
   evening = $('#check_tev').is(':checked');
   all_day = $('#check_t24').is(':checked');

   date_check = $('#check_date').is(':checked');
   time_check = $('#check_time').is(':checked');
   date_input = $("#Filter_Date").val();
   time_input = $("#Filter_Time").val();
}

function clearMarkers() {
   for (let i = 0; i < markersArray.length; i++) {
      markersArray[i].setMap(null);
   }
   markersArray = [];
}

function closeInfoWindows() {

}

function getInitial() {
   const urlParams = new URLSearchParams(window.location.search);

   keyword = urlParams.get('keyword');
   monday = urlParams.has('dm');
   tuesday = urlParams.has('dtu');
   wednesday = urlParams.has('dw');
   thursday = urlParams.has('dth');
   friday = urlParams.has('df');
   saturday = urlParams.has('dsa');
   sunday = urlParams.has('dsu');

   morning = urlParams.has('tmo');
   midday = urlParams.has('tmi');
   afternoon = urlParams.has('taf');
   evening = urlParams.has('tev');
   all_day = urlParams.has('t24');

   date_check = urlParams.has('date');
   time_check = urlParams.has('time');
   date_input = urlParams.get('date');
   time_input = urlParams.get('time');
}

function setInitial() {
   const urlParams = new URLSearchParams(window.location.search);
   $('#keyword_input').val(keyword);
   $('#check_dm').prop('checked', monday);
   $('#check_dtu').prop('checked', tuesday);
   $('#check_dw').prop('checked', wednesday);
   $('#check_dth').prop('checked', thursday);
   $('#check_df').prop('checked', friday);
   $('#check_dsa').prop('checked', saturday);
   $('#check_dsu').prop('checked', sunday);

   $('#check_tmo').prop('checked', morning);
   $('#check_tmi').prop('checked', midday);
   $('#check_taf').prop('checked', afternoon);
   $('#check_tev').prop('checked', evening);
   $('#check_t24').prop('checked', all_day);

   $('#check_date').prop('checked', date_check);
   $('#check_time').prop('checked', time_check);
   $('#check_date').val(date_input);
   $('#check_time').val(time_input);
   $('#Filter_Date').val(date_input);
   $('#Filter_Time').val(time_input);

   $.each($("input:checkbox[filtercategory='People Served']"), function () {
      $(this).prop('checked', urlParams.has($(this).attr("name")));
   });

   $.each($("input:checkbox[filtercategory='Food Offered']"), function () {
      $(this).prop('checked', urlParams.has($(this).attr("name")));
   });
}

function getResults() {
   $("#HeaderStripe").addClass("progress-bar-striped progress-bar-animated");
   getInputs();

   let encodedKeyword = encodeURIComponent(keyword);

   let urlPart = encodedKeyword;

   if (monday) urlPart += '&dm=on';
   if (tuesday) urlPart += '&dtu=on';
   if (wednesday) urlPart += '&dw=on';
   if (thursday) urlPart += '&dth=on';
   if (friday) urlPart += '&df=on';
   if (saturday) urlPart += '&dsa=on';
   if (sunday) urlPart += '&dsu=on';
   if (morning) urlPart += '&tmo=on';
   if (midday) urlPart += '&tmi=on';
   if (afternoon) urlPart += '&taf=on';
   if (evening) urlPart += '&tev=on';
   if (all_day) urlPart += '&t24=on';
   if (date_check) urlPart += ('&date=' + date_input);
   if (time_check) urlPart += ('&time=' + time_input);

   $.each($("input:checkbox[filtercategory='People Served']:checked"), function () {
      urlPart += ('&' + $(this).attr("name") + '=on');
   });

   $.each($("input:checkbox[filtercategory='Food Offered']:checked"), function () {
      urlPart += ('&' + $(this).attr("name") + '=on')
   });

   let apiURL = '/api/search?keyword=' + urlPart;
   let pageURL = '/?keyword=' + urlPart;

   if (controller !== null)
      controller.abort();
   controller = new AbortController();

   fetch(apiURL, { signal: controller.signal })
      .then((res) => res.json())
      .then((data) => {
         $("#HeaderStripe").removeClass("progress-bar-striped progress-bar-animated");
         window.history.replaceState({}, '', pageURL);
         clearMarkers();
         $("#site_results").empty();
         data.json_list.forEach(site => {
            if (userAddress == null || (calculateDistance(userAddress_Lat, userAddress_Lon, site.latitude, site.longitude, 'K') <= userRange)) {
               // data sanitization to prevent XSS
               let name = $('<span>').text(site.site_name).html();
               let description = $('<span>').text(site.description).html();
               let food_offered = $('<span>').text(site.food_offered).html();
               let people_served = $('<span>').text(site.people_served).html();
               let accessibility_level = $('<span>').text(site.accessibility_level).html();
               let accessibility_info = $('<span>').text(site.accessibility_info).html();
               let calendar_string = `<a class="resource-details" href="#" data-resourceid="${site.id}">${site.calendar_string}</a>`
               // let calendar_string = $(calendar_stringHTML).text(site.calendar_string).html();

               let contactText = '';
               let contact_name = " | Main Contact Name: " + site.main_contact_name;
               let phone = " | Phone: " + site.main_contact_phone;
               let email = " | Email: " + site.main_contact_email;
               if (site.main_contact_name) contactText += contact_name;
               if (site.main_contact_phone) contactText += phone;
               if (site.main_contact_email) contactText += email;
               contactText = contactText.substring(3);
               contactText = $('<span>').text(contactText).html();
               if (contactText !== '') contactText = `<small class="text-muted">${contactText}</small>`;

               let siteUrl = '';
               let preSanitzedUrl = site.url
               if (preSanitzedUrl) {
                  if (preSanitzedUrl.search(/http:/i) == -1 && preSanitzedUrl.search(/https:/i) == -1) {
                     preSanitzedUrl = "http://" + preSanitzedUrl
                  }
               }
               siteUrl = $('<span>').text(site.url).html();
               if (siteUrl) siteUrl = `<small class="text-muted">Website: </small><a href="${preSanitzedUrl}" class="small" target="_blank">${siteUrl}</a>`;

               let address = $('<span>').text(site.address).html();
               let city = $('<span>').text(site.city).html();
               let state = $('<span>').text(site.state).html();
               let zip = $('<span>').text(site.zip).html();
               let concat_address = $('<span>').text(site.concat_address).html();

               if (keyword) name = name.replace(new RegExp(keyword, "gi"), (match) => `<mark style="padding:0px;">${match}</mark>`);
               if (keyword) description = description.replace(new RegExp(keyword, "gi"), (match) => `<mark style="padding:0px;">${match}</mark>`);
               if (keyword) concat_address = concat_address.replace(new RegExp(keyword, "gi"), (match) => `<mark style="padding:0px;">${match}</mark>`);

               let eventBadge = (site.resource_type == 'One-time Event') ? '<span class="badge rounded-pill" style="background-color: #c96a2a; padding-top: 5px;">Event</span>' : '';
               let summerBadge = (site.resource_type == 'Summer Meal Site') ? '<span class="badge rounded-pill" style="background-color: #802cb0; padding-top: 5px;">Summer Meal Site</span>' : '';
               let openNowBadge = site.open_now ? '<span class="badge rounded-pill bg-success" style="padding-top: 5px;">Open Now</span>' : '';

               let contents = `
            <div class="d-flex w-100 align-items-stretch">
               <div class="w-100 py-3">
                  <div class="d-flex w-100 align-items-start justify-content-between">
                     <strong class="notranslate">${name}</strong>
                     <div>
                     ${eventBadge}
                     ${summerBadge}
                     ${openNowBadge}
                     </div>
                  </div>
                  <small class="text-muted">${concat_address}</small>
                  <div class="my-1 small"><i class="fa-solid fa-calendar text-muted"></i>&nbsp;${calendar_string}</div>
                  <div class="my-1 small"><span class="fw-bold">People Served: </span>${people_served}</div>
                  <div class="my-1 small"><span class="fw-bold">Food Offered: </span>${food_offered}</div>
                  <div class="my-1 small fw-bold"><i class="fa-solid fa-lg fa-wheelchair"></i> ${accessibility_level}</div>
                  <div class="my-1 small">${accessibility_info}</div>
                  <div class="my-1 small">${description}</div>
                  <div>${contactText}</div>
                  <div>${siteUrl}</div>
               </div>
            </div>`;

               // const siteElement = $('<label>', { class: "list-group-item list-group-item-action lh-tight px-3", id: "site_" + site.id }).html(contents);
               const siteElement = $('<div>', { class: "list-group-item list-group-item-action lh-tight px-3" }).html(contents);

               // content string for info window
               const contentString = `
            <div>
               <h6>${name}</h6>
               <p class="small">${address} ${city}, ${state} ${zip}</p>
               <p>${description}</p>
            </div>
            `;

               // let getUrl = window.location;
               // let baseUrl = getUrl.protocol + "//" + getUrl.host;
               const icons = {
                  'Summer Meal Site': window.location.protocol + '//' + window.location.host + "/static/img/summer_marker.png",
                  'Regular': window.location.protocol + '//' + window.location.host + "/static/img/regular_marker.png",
                  'One-time Event': window.location.protocol + '//' + window.location.host + "/static/img/event_marker.png",
               }
               // create marker, info window, and infowindow listener
               if (site.latitude && site.longitude) {
                  const marker = new google.maps.Marker({
                     position: { lat: site.latitude, lng: site.longitude },
                     map: map,
                     title: site.site_name,
                     icon: icons[site.resource_type],
                  });

                  const infowindow = new google.maps.InfoWindow({
                     content: contentString,
                  });
                  marker.addListener("click", () => {
                     if (activeWindow != null) activeWindow.close();
                     infowindow.open({
                        anchor: marker,
                        map,
                        shouldFocus: false,
                     });
                     activeWindow = infowindow;
                  });
                  siteElement.on("click", () => {
                     if (activeWindow != null) activeWindow.close();
                     infowindow.open({
                        anchor: marker,
                        map,
                        shouldFocus: false,
                     });
                     activeWindow = infowindow;
                  });
                  markersArray.push(marker);
               }
               $("#site_results").append(siteElement);
            }
         });
      })
      .catch(function (err) {
         console.log(err);
         // getResults();
      });
}

function loadLock(objID) {
   objID = '#' + objID
   let revertHTML = $(objID).html();
   let spinnerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                  <span class="visually-hidden">Loading...</span>`;
   $(objID).html(spinnerHTML);
   $(objID).prop("disabled", true);
   return revertHTML
}

function loadUnlock(objID, revertHTML) {
   objID = '#' + objID
   $(objID).prop("disabled", false);
   $(objID).html(revertHTML);
}

function updateUserAddress() {
   userAddress = $("#map_address").val();
   userRange = $("#map_range").val() * 1.60934;
   let userRange_Miles = $("#map_range").val();

   const query = encodeURIComponent(`${userAddress}`);
   const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${query}&key=AIzaSyARsZP175eT0P6iGRececqNN_4aISTzWPs`;
   const revertHTML = loadLock('map-search-button');

   fetch(url)
      .then((res) => res.json())
      .then((data) => {
         userAddress_Lat = data.results[0].geometry.location.lat;
         userAddress_Lon = data.results[0].geometry.location.lng;
      })
      .then((res) => getResults())
      .then((data) => {
         var userAddress_latLng = new google.maps.LatLng(userAddress_Lat, userAddress_Lon);
         map.setCenter(userAddress_latLng);
         let mapstring = `within ${userRange_Miles} mile(s) of ${userAddress}`
         $("#map_options_string").text(mapstring);
         $("#map_options").hide();
         $("#map_filter_area").hide();
         $("#map_options_filtered").show();
         loadUnlock('map-search-button', revertHTML);
      })
      .catch((e) => {
         Swal.fire(
            'Unsuccessful',
            'Unable to geocode address. Please try reformatting your address.',
            'error'
         );
         loadUnlock('map-search-button', revertHTML);
      });
}

function clearUserAddress() {
   userRange = null;
   userAddress = null;
   userAddress_Lat = null;
   userAddress_Lon = null;
   $("#map_options_filtered").hide();
   $("#map_filter_area").show();
   $("#map_options").show();
   getResults();
}

// 0.804672 km is 0.5 land miles
function calculateDistance(lat1, lon1, lat2, lon2, unit) {
   var radlat1 = Math.PI * lat1 / 180
   var radlat2 = Math.PI * lat2 / 180
   var radlon1 = Math.PI * lon1 / 180
   var radlon2 = Math.PI * lon2 / 180
   var theta = lon1 - lon2
   var radtheta = Math.PI * theta / 180
   var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
   dist = Math.acos(dist)
   dist = dist * 180 / Math.PI
   dist = dist * 60 * 1.1515
   if (unit == "K") {
      dist = dist * 1.609344
   }
   if (unit == "N") {
      dist = dist * 0.8684
   }
   return dist
}

function getPDF() {
   getInputs();

   let encodedKeyword = encodeURIComponent(keyword);

   let url = '/api/pdf?keyword=' + encodedKeyword;
   if (monday) url += '&dm=on';
   if (tuesday) url += '&dtu=on';
   if (wednesday) url += '&dw=on';
   if (thursday) url += '&dth=on';
   if (friday) url += '&df=on';
   if (saturday) url += '&dsa=on';
   if (sunday) url += '&dsu=on';
   if (morning) url += '&tmo=on';
   if (midday) url += '&tmi=on';
   if (afternoon) url += '&taf=on';
   if (evening) url += '&tev=on';
   if (all_day) url += '&t24=on';
   if (date_check) url += ('&date=' + date_input);
   if (time_check) url += ('&time=' + time_input);

   $.each($("input:checkbox[filtercategory='People Served']:checked"), function () {
      url += ('&' + $(this).attr("name") + '=on');
   });

   $.each($("input:checkbox[filtercategory='Food Offered']:checked"), function () {
      url += ('&' + $(this).attr("name") + '=on')
   });

   window.open(url, '_blank');
}

function populateResourceDetails() {
   // let buttonID = $(this).attr('id')
   // let revertHTML = loadLock(buttonID);
   // loadUnlock(buttonID, revertHTML);
   let id = $(this).attr('data-resourceid');
   // $('#Edit_ResourceID').attr("data-resourceid", id);
   // $('#Edit_ResourceID').val(id);

   modalSpinnerShow('Details');
   $("#Details_Modal").modal("show");
   fetch("/api/resources/details/" + id)
      .then(function (response) {
         if (!response.ok) {
            Swal.fire({
               title: 'Error',
               text: "There was an error retrieving the resource data!",
               icon: 'warning',
               confirmButtonColor: '#3085d6',
               cancelButtonColor: '#d33',
               confirmButtonText: 'OK'
            })
            $("#Details_Modal").modal("hide");
         }
         else {
            return response.json();
         }
      })
      .then(function (jsonResponse) {
         $("#Details_SiteName").text(jsonResponse['site_name']);
         $("#Details_StartDate").text(jsonResponse['start_date']);
         $("#Details_Repeats").text(jsonResponse['recurrence_type']);
         if (jsonResponse['end_date'] == null) {
            $("#Details_EndRepeat").hide();
         } else {
            $("#Details_EndRepeat_Value").text(jsonResponse['end_date']);
            $("#Details_EndRepeat").show();
         }

         if (jsonResponse['basic_hours'] == false) {
            const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
            for (let i = 0; i < weekday.length; i++) {
               let currentHourID = "Details_Hours_" + weekday[i];
               $('#' + currentHourID).text(jsonResponse[currentHourID]);
            }
            $("#Details_BasicHours").hide();
            $("#Details_WeekdayMatrix").show();
         } else {
            $("#Details_BasicHours_Value").text(jsonResponse['basic_hours_value']);
            $("#Details_BasicHours").show();
            $("#Details_WeekdayMatrix").hide();
         }
         modalSpinnerHide('Details');
      });
}

// Initialize and add the map
function initMap() {
   // location of Trenton, NJ
   var CustomMapStyles = [
      {
         "featureType": "poi",
         "stylers": [
            {
               "visibility": "off"
            }
         ]
      },
      {
         "featureType": "poi.school",
         "stylers": [
            {
               "visibility": "on"
            }
         ]
      }
   ];
   const trenton = { lat: 40.2171, lng: -74.7429 };
   // The map, centered at Uluru
   map = new google.maps.Map(document.getElementById("map"), {
      zoom: 14,
      center: trenton,
      styles: CustomMapStyles,
   });

   // const input = document.getElementById("map_address");
   // const options = {
   //    componentRestrictions: { country: "us" },
   //    fields: ["address_components", "geometry", "icon", "name"],
   //    strictBounds: false,
   // };
   // const autocomplete = new google.maps.places.Autocomplete(input, options);
}

function modalSpinnerShow(objID) {
   let spinnerID = '#' + objID + '_Spinner'
   let contentID = '#' + objID + '_Content'
   let headerID = '#' + objID + '_Content_Header'
   let footerID = '#' + objID + '_Content_Footer'
   $(spinnerID).show()
   $(contentID).hide()
   $(headerID).hide()
   $(footerID).hide()
}

function modalSpinnerHide(objID) {
   let spinnerID = '#' + objID + '_Spinner'
   let contentID = '#' + objID + '_Content'
   let headerID = '#' + objID + '_Content_Header'
   let footerID = '#' + objID + '_Content_Footer'
   $(spinnerID).hide()
   $(contentID).show()
   $(headerID).show()
   $(footerID).show()
}

// Need to fix user search logging
async function getUserData() {
   if (!localStorage.hasOwnProperty("clientId")) {
      const code = Math.random().toString(36).substring(2, 18);
      uuid = localStorage.setItem("clientId", code);
   }
   uuid = localStorage.getItem("clientId");

   const userData = {
      uuid: uuid,
      latitude: null,
      longitude: null
   }

   async function resetPosition(position) {
      userData['latitude'] = position.coords.latitude
      userData['longitude'] = position.coords.longitude
      sendData();
   }

   function sendData() {
      fetch("/api/visit", {
         method: "POST",
         body: JSON.stringify(userData),
         headers: {
            "Content-Type": "application/json"
         },
      }).catch((error) => console.log(error));
   }

   navigator.permissions.query({
      name: 'geolocation'
   }).then(function (result) {
      if (result.state == 'granted') {
         navigator.geolocation.getCurrentPosition(resetPosition);
      } else if (result.state == 'prompt') {
         navigator.geolocation.getCurrentPosition(resetPosition);
      } else if (result.state == 'denied') {
         sendData();
      }
      getResults();
   });

   // if (navigator.geolocation) {
   //    navigator.geolocation.getCurrentPosition(resetPosition);
   // } else {
   //    sendData();
   // }
}

function clearFilters() {
   $("#filter_group :checkbox").prop('checked', false);
   $("#Filter_Time").val('');
   $("#Filter_Date").val('');
   $("#keyword_input").val('');
   getResults();
}

function runUserLog() {
   logTimer = window.setTimeout(
      () => {
         let people_served_ids = [];
         $.each($("input:checkbox[filtercategory='People Served']:checked"), function () {
            people_served_ids.push($(this).attr('data-filterid'));
         });

         let food_offered_ids = [];
         $.each($("input:checkbox[filtercategory='Food Offered']:checked"), function () {
            food_offered_ids.push($(this).attr('data-filterid'))
         });

         const searchData = {
            uuid: uuid,
            search: keyword,
            monday: monday,
            tuesday: tuesday,
            wednesday: wednesday,
            thursday: thursday,
            friday: friday,
            saturday: saturday,
            sunday: sunday,
            morning: morning,
            midday: midday,
            afternoon: afternoon,
            evening: evening,
            people_served_ids: people_served_ids,
            food_offered_ids: food_offered_ids,
            all_day: all_day,
            filtered_by_date: $('#check_date').is(':checked'),
            date_filter_value: $("#Filter_Date").val(),
            filtered_by_time: $('#check_time').is(':checked'),
            time_filter_value: $("#Filter_Time").val(),
         };

         fetch("/api/log", {
            method: "POST",
            body: JSON.stringify(searchData),
            headers: {
               "Content-Type": "application/json"
            },
         }).catch((error) => console.log(error));
      }, 4000);
}

function setup() {
   // auto-close filter group on mobile
   if ($(window).width() < 768) {
      $('#filter_group').removeClass('show');
   }

   // load tooltips
   const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
   const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
   })

   // manually enable tutorial button tooltip
   // Disabled because it is really distracting and hard to get rid of
   // const tutorialTooltip = bootstrap.Tooltip.getInstance($('#viewTutorial i').get(0));
   // window.setTimeout(() => tutorialTooltip.show(), 1000);

   // set listeners for inputs and buttons
   $('#keyword_input').on('input', getResults);
   $('#filter_group').on('input', getResults);
   $('#btnPrint').on("click", getPDF);
   $("#map-search-button").on("click", updateUserAddress);
   $("#search-button").on("click", getResults);
   $("#map_options_string").on("click", clearUserAddress);
   $("#ClearFiltersBtn").on("click", clearFilters);
   $('#site_results').on("click", "a.resource-details", populateResourceDetails);


   $("#Filter_Date").on("input", function () {
      if ($(this)[0].checkValidity()) {
         $("#check_date").val($(this).val());
         $("#check_date").prop('checked', true);
      }
   });

   $("#Filter_Time").on("input", function () {
      if ($(this)[0].checkValidity()) {
         $("#check_time").val($(this).val())
         $("#check_time").prop('checked', true);
      }
   });

   $('#btnMap').on("click", function () {
      $(this).toggleClass("btn-primary btn-outline-primary");
      const mapTooltip = bootstrap.Tooltip.getInstance($('#btnMap i').get(0));
      mapTooltip.hide();

      if ($("#mapCollapse").is(":visible")) {
         $("#mapCollapse").collapse("hide");
         $("#map_filter_area").hide();
      } else {
         $("#map_filter_area").show();
         $("#mapCollapse").collapse("show");
      }

      setTimeout(function() {
         if ($("#mapCollapse").is(":visible")) {
            $("#map_filter_area").show();
         } else {
            $("#map_filter_area").hide();
         }
      }, 1000);

      // Shows secret tooltip, if first time
      const hadMapTour = localStorage.getItem('hadMapTour');
      if (!hadMapTour) {
         introJs().oncomplete(function () {
            localStorage.setItem('hadMapTour', true);
         }).onexit(function () {
            localStorage.setItem('hadMapTour', true);
         }).goToStepNumber(8).start();;
      }
   });

   $("#map_address").keyup(function (event) {
      if (event.keyCode === 13) {
         $("#map-search-button").click();
      }
   });

   // initialize page state from query string
   getInitial();
   setInitial();
   getResults();

   // set listener for tutorial
   $('#viewTutorial').on("click", () => { introJs().start(); });

   // manage tutorial memory
   const hadTour = localStorage.getItem('hadTour');
   if (!hadTour) {
      introJs().oncomplete(function () {
         localStorage.setItem('hadTour', true);
      }).onexit(function () {
         localStorage.setItem('hadTour', true);
      }).start();
   }

   // set listeners for user data logging
   $('#keyword_input').on('input', () => {
      clearTimeout(logTimer);
      runUserLog();
   });
   $('#filter_group').on('input', () => {
      clearTimeout(logTimer);
      runUserLog();
   });

   // log anonymous user profile
   getUserData();
}

document.addEventListener('DOMContentLoaded', setup);