console.clear();

const pomodoro = document.getElementById("pomodoro");
const shortBreak = document.getElementById("short-break");
const longBreak = document.getElementById("long-break");
const startBtn = document.getElementById("start");
const pauseBtn = document.getElementById("pause");
const resetBtn = document.getElementById("reset");

/*TODO LIST*/
let todoList = [];
const addButton = document.getElementById("add-button");
const inputElement = document.getElementById("input");
const listElement = document.getElementById("todo-list");

// render item of todo list
const renderTodoListItem = (item) => {
  //create div includes start button, li element and deletebutton
  const div = document.createElement("DIV");
  div.setAttribute("class", "toDo-Item");

  const node = document.createElement("LI"); // create li element
  const textnode = document.createTextNode(item.text); // create text in node
  node.setAttribute("id", `item-${item.id}`); // add unique id => helping on edit and remove for specific item
  node.setAttribute("class", "unchecked");
  node.appendChild(textnode); //add text to li element

  //create start button
  const startToDo = document.createElement("BUTTON");
  const startText = document.createTextNode("Start");
  startToDo.setAttribute("class", `startBtn`);
  startToDo.appendChild(startText);
  startToDo.addEventListener("click", () => {
    toggleButton();
    console.log("hi");
  });

  //create delete button and append it to each li element
  const nodeSpan = document.createElement("span"); //create span element
  const spanText = document.createTextNode("\u00D7"); // create delete icon by unicode
  nodeSpan.setAttribute("id", `deleteBtn-${item.id}`);
  nodeSpan.setAttribute("class", `deleteBtn`);
  nodeSpan.appendChild(spanText); //add delete icon to span element
  node.appendChild(nodeSpan); //add span with delete icon to li

  div.appendChild(startToDo);
  div.appendChild(node);

  // listElement.appendChild(startToDo);
  listElement.appendChild(div);

  //delete the Li element when click on delete button
  nodeSpan.addEventListener("click", () => {
    const buttonId = parseFloat(nodeSpan.id.split("-")[1]); //id of current delete button
    todoList = todoList.filter((el) => el.id !== buttonId);
    renderTodoList();
  });

  //toggle class to checked class when click on li element - text
  //need to find index of object to access inside the object
  node.addEventListener("click", () => {
    const textId = parseFloat(node.id.split("-")[1]);
    const index = todoList.findIndex((el) => el.id === textId);
    todoList[index].ischecked = !todoList[index].ischecked;
    if (todoList[index].ischecked) {
      node.classList.add("checked");
    } else {
      node.classList.remove("checked");
    }
  });
};

// render todo list in html
const renderTodoList = () => {
  listElement.innerHTML = ""; // clear the list element before rerender
  todoList.forEach((item) => {
    renderTodoListItem(item);
  });
};
// defined event click for add button
addButton.addEventListener("click", () => {
  const inputValue = inputElement.value; // get value from input
  if (inputValue === "") return;
  todoList.push({ text: inputValue, id: Math.random(), ischecked: false }); // push object item to todolist
  inputElement.value = ""; //clear out input field
  renderTodoList(); // rerender the todoList Element
});

/*Pomodoro timer*/
let countdown;
const second = 1000;
const minute = 60000;

const initialValue = {
  timer: 25 * minute,
  shortBreak: 5 * minute,
  longBreak: 10 * minute,
  interval: 4,
  isShortBreak: false,
  isLongBreak: false
};

const pomodoroConfig = Object.assign({}, initialValue); //copy initialValue object and wont modifiy its values

//Main function: timer, start countdown and display update
function workTimer() {
  clearInterval(countdown);
  countdown = setInterval(() => {
    pomodoroConfig.timer = pomodoroConfig.timer - second;
    displayTimeLeft(pomodoroConfig.timer, "Working");

    if (!pomodoroConfig.timer) {
      //pomodoroConfig.timer === 0
      clearInterval(countdown);
      pomodoroConfig.isShortBreak = true;
      pomodoroConfig.interval = pomodoroConfig.interval - 1;
    }
    if (
      pomodoroConfig.isShortBreak &&
      pomodoroConfig.shortBreak &&
      pomodoroConfig.interval > 0
    ) {
      pomodoroConfig.isShortBreak = false;
      shortBreakTimer();
    }
    if (pomodoroConfig.interval === 0) {
      longBreakTimer();
      pomodoroConfig.interval = initialValue.interval;
      displayTimeLeft(initialValue.workTime, "Working");
    }
  }, second);
}

function shortBreakTimer() {
  clearInterval(countdown);
  countdown = setInterval(() => {
    pomodoroConfig.isShortBreak = true;
    pomodoroConfig.shortBreak = pomodoroConfig.shortBreak - second;
    displayTimeLeft(pomodoroConfig.shortBreak, "Break");
    if (!pomodoroConfig.shortBreak) {
      pomodoroConfig.isShortBreak = false;
      clearInterval(countdown);
      workTimer();
      pomodoroConfig.timer = initialValue.timer;
      pomodoroConfig.shortBreak = initialValue.shortBreak;
    }
  }, second);
}

function longBreakTimer() {
  clearTimeout(countdown);
  countdown = setInterval(() => {
    pomodoroConfig.longBreak = pomodoroConfig.longBreak - second;
    displayTimeLeft(pomodoroConfig.longBreak, "Long Break");
    if (pomodoroConfig.longBreak == 0) {
      clearInterval(countdown);
    }
  }, second);
}

function displayTimeLeft(miliseconds, type) {
  const minutes = Math.floor(miliseconds / minute);
  const remainderSeconds = (miliseconds / second) % 60;
  const display = `${type} ${minutes}:${
    remainderSeconds < 10 ? "0" : ""
  }${remainderSeconds}`; //template literal
  document.getElementById("display").innerHTML = display;
}

//function toggle start/pause timer
function toggleButton() {
  startBtn.textContent = "Pause";
  if (!pomodoroConfig.isPause) {
    if (pomodoroConfig.isShortBreak) {
      shortBreakTimer();
    } else {
      workTimer();
    }
  } else {
    startBtn.textContent = "Resume";
    clearInterval(countdown);
    if (pomodoroConfig.timer === 0) {
      pomodoroConfig.timer = initialValue.timer;
    }
    if (pomodoroConfig.shortBreak === 0) {
      pomodoroConfig.shortBreak = initalValue.shortBreak;
    }
  }
  pomodoroConfig.isPause = !pomodoroConfig.isPause;
}

//Buttons function and display
startBtn.addEventListener("click", () => {
  toggleButton();
});

resetBtn.addEventListener("click", () => {
  clearInterval(countdown);
  startBtn.textContent = "Start";
  pomodoroConfig.timer = initialValue.timer;
  pomodoroConfig.shortBreak = initialValue.shortBreak;
  pomodoroConfig.longBreak = initialValue.longBreak;
  pomodoroConfig.isPause = false;
  displayTimeLeft(initialValue.timer, "Working");
});

//Assign value to timer, break and long break from user input
pomodoro.addEventListener("input", () => {
  // customizedTime();
  if (pomodoro.value !== "" || pomodoro.value !== "25") {
    initialValue.timer = parseInt(pomodoro.value) * minute;
    pomodoroConfig.timer = initialValue.timer;
  }
  if (pomodoro.value === "") {
    initialValue.timer = 25 * minute;
    pomodoroConfig.timer = initialValue.timer; //default value
  }
  console.log(event.target.value, pomodoroConfig.timer, initialValue.timer);
});

shortBreak.addEventListener("input", () => {
  if (shortBreak.value !== "" || shortBreak.value !== "25") {
    initialValue.shortBreak = parseInt(shortBreak.value) * minute;
    pomodoroConfig.shortBreak = initialValue.shortBreak;
  }
  if (shortBreak.value === "") {
    initialValue.shortBreak = 5 * minute;
    pomodoroConfig.shortBreak = initialValue.shortBreak; //default value
  }
  console.log(
    event.target.value,
    pomodoroConfig.shortBreak,
    initialValue.shortBreak
  );
});

longBreak.addEventListener("input", () => {
  if (longBreak.value !== "" || longBreak.value !== "25") {
    initialValue.longBreak = parseInt(longBreak.value) * minute;
    pomodoroConfig.longBreak = initialValue.longBreak;
  }
  if (longBreak.value === "") {
    initialValue.longBreak = 10 * minute;
    pomodoroConfig.longBreak = initialValue.longBreak; //default value
  }
  console.log(
    event.target.value,
    pomodoroConfig.longBreak,
    initialValue.longBreak
  );
});