// Parse JSON data for configuration
var js_data_dictionary = JSON.parse(document.getElementById('js_data').textContent);
var validDays = js_data_dictionary['valid_days'];
var startDate = js_data_dictionary['start_date'];
var endDate = js_data_dictionary['end_date'];
var detectionMinutes = js_data_dictionary['detection_minutes'];
var selectedDate = js_data_dictionary['selected_date']; // format: "dd-MM-yyyy-HH-mm"
var allowPrevious = js_data_dictionary['allow_previous'];
var allowNext = js_data_dictionary['allow_next'];

// Function to create a Date object from a date string "dd-MM-yyyy" or "dd-MM-yyyy-HH-mm"
function createDateFromString(dateString) {
  const parts = dateString.split('-');
  const day = parseInt(parts[0], 10);
  const month = parseInt(parts[1], 10) - 1;
  const year = parseInt(parts[2], 10);
  if(parts.length === 3){
    return new Date(year, month, day);
  }
  else{
    const hour = parseInt(parts[3], 10);
    const minute = parseInt(parts[4], 10);
    return new Date(year, month, day, hour, minute);
  }
}

function userChangedDate(newDate) {
    // Parse the initial selected date from the dictionary
    let initialDate = createDateFromString(js_data_dictionary['selected_date']);

    // Calculate the difference in milliseconds
    let differenceInMillis = Math.abs(newDate - initialDate);

    // Convert milliseconds to minutes
    let differenceInMinutes = differenceInMillis / (1000 * 60);

    // Return true if the difference is 10 minutes or less, otherwise false
    return differenceInMinutes > 10;
}


// Function to create a string "dd-MM-yyyy&time=HH:mm" from a Date object
function createStringFromDatetime(date) {
  // Extract day, month, year, hours, and minutes
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed
  const year = date.getFullYear();
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');

  // Return the formatted string
  return `${day}-${month}-${year}&time=${hours}:${minutes}`;
}

// Helper function to format a Date object as "dd-MM-yyyy"
function createStringFromDate(date) {
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed
  const year = date.getFullYear();
  return `${day}-${month}-${year}`;
}

function isDateInValidDays(date, validDays) {
  const formattedDate = createStringFromDate(date);
  return validDays.includes(formattedDate);
}

let selectedFormattedDate = createStringFromDate(createDateFromString(selectedDate));
let formattedInitialDate = createStringFromDatetime(createDateFromString(selectedDate));

let prevButton = {
    content: `<span class="prev-icon"></span>`,
    className: 'prev-button-classname',
    onClick: (dp) => {
        const newUrl = `${window.location.pathname.replace(/\/$/, '')}/get_previous/?detection_date=${formattedInitialDate}`;
        window.location.href = newUrl;
    }
}

let nextButton = {
    content: `<span class="next-icon"></span>`,
    className: 'next-button-classname',
    onClick: (dp) => {
        const newUrl = `${window.location.pathname.replace(/\/$/, '')}/get_next/?detection_date=${formattedInitialDate}`;
        window.location.href = newUrl;
    }
}

let latestButton = {
    content: `<span class="latest-icon"></span>`,
    className: 'latest-button-classname',
    onClick: (dp) => {
        const newUrl = `${window.location.pathname}`;
        window.location.href = newUrl;
    }
}

let confirmButton = {
    content: `<span class="confirm-button-text-disabled">Confirm</span>`, // Add a dedicated class for the text
    className: 'confirm-button-classname',
    onClick: (dp) => {}
}

if (!allowPrevious) {
    prevButton.content = `<span class="prev-icon-disabled"></span>`;
    prevButton.attrs = {...prevButton.attrs, disabled: true};  // Disable the button
    prevButton.onClick = () => {}
    prevButton.className += '-disabled';
}

if (!allowNext) {
    nextButton.content = `<span class="next-icon-disabled"></span>`;
    nextButton.attrs = {...nextButton.attrs, disabled: true};  // Disable the button
    nextButton.onClick = () => {}
    nextButton.className += '-disabled';

    latestButton.content = `<span class="latest-icon-disabled"></span>`;
    latestButton.attrs = {...latestButton.attrs, disabled: true};  // Disable the button
    latestButton.onClick = () => {}
    latestButton.className += '-disabled';
}

document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('.aerojamming-datepicker').forEach((element) => {
        // Initialize Air Datepicker
        new AirDatepicker(element, {
          locale: localeObj,
          minDate: createDateFromString(startDate),
          maxDate: createDateFromString(endDate.concat("-23-59")), // so that we are allowed to select any time, this can be improved...
          startDate: createDateFromString(selectedDate),
          buttons: [prevButton, nextButton, latestButton, confirmButton],
          autoClose: true,
          fixedHeight: true,
          timepicker: true,
          minutesStep: detectionMinutes,
          selectedDates: [createDateFromString(selectedDate)],
          toggleSelected: false,
          dateTimeSeparator: "&time=", // TODO, not great

          onRenderCell({date, cellType}) {
            if (cellType === 'day') {
              if (!isDateInValidDays(date, validDays)) {
                return {
                  disabled: true,
                  classes: 'disabled-class',
                  attrs: {
                    title: 'No detection data available for this day'
                  }
                }
              }
            }
          },
          // Handle date and time selection and redirect
            onSelect: ({date, formattedDate, datepicker}) => {
                selectedFormattedDate = createStringFromDatetime(date);

                let confirmButtonElement = element.closest('.aerojamming-datepicker').querySelector('.confirm-button-classname');

                if (userChangedDate(date)) {
                    console.log("onSelect() : User HAS changed date. Enable Confirm button.");

                    // Enable the confirm button
                    confirmButtonElement.innerHTML = `<span class="confirm-button-text">Confirm</span>`;
                    confirmButtonElement.disabled = false;

                    // Remove pointer-events style to allow clicking
                    confirmButtonElement.style.pointerEvents = "auto";
                    confirmButtonElement.style.cursor = "pointer";

                    // Update the onClick event to execute the confirm action
                    confirmButtonElement.onclick = () => {
                        const newUrl = `${window.location.pathname}?detection_date=${selectedFormattedDate}`;
                        window.location.href = newUrl;
                    };
                } else {
                    console.log("onSelect() : User HAS NOT changed date. Disable Confirm button.");

                    // Disable the confirm button
                    confirmButtonElement.innerHTML = `<span class="confirm-button-text-disabled">Confirm</span>`;
                    confirmButtonElement.disabled = true;

                    // Apply pointer-events style to prevent clicking
                    confirmButtonElement.style.pointerEvents = "none";
                    confirmButtonElement.style.cursor = "not-allowed";

                    // Remove the onClick event
                    confirmButtonElement.onclick = null;
                }
            }
        });
    });

    let confirmButtonElement = document.querySelector('.confirm-button-classname');
    confirmButtonElement.style.pointerEvents = "none";
    confirmButtonElement.style.cursor = "not-allowed";

    document.addEventListener("DOMContentLoaded", function() {
        let prevButton = document.querySelector('.prev-button-classname');
        let nextButton = document.querySelector('.next-button-classname');
        let latestButton = document.querySelector('.latest-button-classname');

        let prevText = "Go the the previous detection";
        let nextText = "Go the the next detection";
        let latestText = "Go to the most recent detection";

        if (prevButton) {
            prevButton.setAttribute('title', prevText);
        }
        if (nextButton) {
            nextButton.setAttribute('title', nextText);
        }
        if (latestButton) {
            latestButton.setAttribute('title', latestText);
        }
    });
});