import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
import {
  getDatabase,
  ref,
  push,
  onValue,
  remove,
} from "https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js";

const appSettings = {
  databaseURL: process.env.GIFTLY_DB_URL
};

const app = initializeApp(appSettings);
const database = getDatabase(app);
const peopleListInDB = ref(database, "peopleList");

const iconEl = document.getElementById("icon");
const inputFieldEl = document.getElementById("input-field");
const addButtonEl = document.getElementById("add-button");
const peopleListEl = document.getElementById("people-list");

addButtonEl.addEventListener("click", function (e) {
  e.preventDefault();
  let inputValue = inputFieldEl.value;

  if (inputValue.trim()) {
    push(peopleListInDB, inputValue);
    clearInputFieldEl();
  }
});

onValue(peopleListInDB, function (snapshot) {
  if (snapshot.exists()) {
    let peopleArray = Object.entries(snapshot.val());

    clearPeopleListEl();

    for (let i = 0; i < peopleArray.length; i++) {
      let currentPerson = peopleArray[i];
      appendItemToPeopleListEl(currentPerson);
    }
  } else {
    peopleListEl.innerHTML = `<p class="empty-list">No friends here... yet</p>`;
  }
});

function clearPeopleListEl() {
  peopleListEl.innerHTML = "";
}

function clearInputFieldEl() {
  inputFieldEl.value = "";
}

function playGIF() {
  const originalIcon = iconEl.src;
  iconEl.src = "https://media.giphy.com/media/FerjqPHY2OGDPJPwEk/giphy.gif";

  setTimeout(function () {
    iconEl.src = originalIcon;
  }, 1000);
}

function appendItemToPeopleListEl(item) {
  let itemID = item[0];
  let itemValue = item[1];

  let newEl = document.createElement("li");

  newEl.textContent = itemValue;

  newEl.addEventListener("dblclick", function () {
    let exactLocationOfItemInDB = ref(database, `peopleList/${itemID}`);

    remove(exactLocationOfItemInDB);
    playGIF();
  });

  peopleListEl.append(newEl);
}