const { invoke } = window.__TAURI__.core;
const appWindow = window.__TAURI__.window.getCurrentWindow();

document.querySelector(".titlebar-drag").addEventListener("mousedown", (event) => {
  if (event.button === 0) appWindow.startDragging();
});

document.querySelector("#minimize-window").addEventListener("click", () => appWindow.minimize());
document.querySelector("#maximize-window").addEventListener("click", () => appWindow.toggleMaximize());
document.querySelector("#close-window").addEventListener("click", () => appWindow.close());

let menuBarToggled = false;
let greetInputEl;
let greetMsgEl;

get_notes_list();

window.addEventListener('contextmenu', (e) => {
  e.preventDefault();
});


function toggle_menu() {
  let leftColumn = document.querySelector("#left-column");
  let toggleSearch = document.querySelector("#toggle-search");
  let searchBar = document.querySelector("#search_bar");
  let leftColumnDivider = document.querySelector("#left-column-divider");
  let notesListParent = document.querySelector(".notes-list-parent");
  let leftBarIcon = document.querySelector("#toggle-left-bar-icon");
  let toolBar = document.querySelector(".toolbar");

  if (!menuBarToggled) {
    notesListParent.style.transition = '';
    toggleSearch.style.transition = '';
    leftColumn.style.minWidth = '4rem';
    leftColumn.style.width = '4rem';
    leftBarIcon.style.rotate = '90deg';
    leftBarIcon.style.fill = 'var(--color-accent)'
    toggleSearch.style.opacity = '0%';
    searchBar.style.display = 'none';
    leftColumnDivider.style.display = 'none'; 
    notesListParent.style.opacity = '0%';
    toolBar.style.borderBottomLeftRadius = '1rem';
    toolBar.style.borderBottomRightRadius = '1rem';
  } else {
    notesListParent.style.transition = '0.25s opacity ease 0.2s';
    toggleSearch.style.transition = '0.25s opacity ease 0.2s';
    leftBarIcon.style.fill = 'var(--color-icon)'
    leftBarIcon.style.rotate = '270deg';
    leftColumn.style.minWidth = '15rem';
    toggleSearch.style.display = 'inline-block';
    searchBar.style.display = 'flex';
    leftColumnDivider.style.display = 'block';
    leftColumn.style.width = '40%';
    toggleSearch.style.opacity = '100%';
    notesListParent.style.display = 'block'; 
    notesListParent.style.opacity = '100%';
    toolBar.style.borderBottomLeftRadius = '0';
    toolBar.style.borderBottomRightRadius = '10px';
  }

  menuBarToggled = !menuBarToggled;
}

function toggle_search() {
  document.querySelector("#search_input").value = "";

  get_notes_list();
}

function on_search_input() {
  get_notes_list();
}

async function get_notes_list() {
  try {
    let notes = await invoke("get_notes_list", { search: document.querySelector("#search_input").value });
    let notes_list = document.querySelector(".notes-list");

    notes_list.innerHTML = "";
    notes.forEach(note => {

      let item = document.createElement("div");
      item.innerHTML = `
      <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;"> 
        <div style="display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 0.5rem;">
          <svg style="fill: var(--color-accent);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24px" width="24px">
          <path d="M9,19q-2.93,0-4.96-2.04Q2,14.93 2,12Q2,9.07 4.04,7.04T9,5t4.96,2.04T16,12t-2.04,4.96T9,19Zm0-7Zm7,6.9v-2q1.75-0.35 2.88-1.72T20,12T18.88,8.82T16,7.1v-2q2.6,0.35 4.3,2.31Q22,9.38 22,12t-1.7,4.59T16,18.9Zm-3.46-3.36Q14,14.08 14,12q0-2.08-1.46-3.54T9,7Q6.93,7 5.46,8.46T4,12t1.46,3.54T9,17t3.54-1.46Z" />
          </svg>
          <p style="color: #59a9ff; font-weight: bold; font-size: 0.8rem">${note.title}</p>
        </div>
        <p style="font-size: 0.7rem;">${new Date(note.created_at).toDateString()} ${new Date(note.created_at).toLocaleTimeString().split(':')[0]}:${new Date(note.created_at).toLocaleTimeString().split(':')[1]}</p>
      </div>
      <div style="display: flex; flex-direction: row; justify-content: end; align-items: center;">
        <p style="text-align: end;">${note.text}</p>
      </div>
      `;

      notes_list.appendChild(item);
    });

  } catch (error) {
    console.error("Fehler beim Laden:", error);
  }
}