// todolist 資料容器
// 欄位: id, title, info
let todoListData = [];

// 編號用隨機亂數
function newId() {
  return ~~(Date.now() + Math.random() * 50);
}

// 尋找 id 的 index
function findIndex(id) {
  return todoListData.findIndex((element) => element.id == id);
}

// 新增資料
function createData() {
  const title = document.getElementById("inputTitle");
  const info = document.getElementById("inputInfo");

  const newTodoData = {
    id: newId(),
    title: title.value,
    info: info.value
  };
  todoListData.push(newTodoData);
  showData(todoListData);
}

// 查詢資料
function readData() {
  // 找 id 存在的 index 位置
  const findId = document.getElementById("inputFind").value;
  const listIndex = findIndex(findId);

  // 沒有 id 為全部查詢
  if (findId) {
    if (listIndex < 0) {
      alert("找不到:" + findId);
      showData(todoListData);
    } else {
      showData(todoListData[listIndex]);
    }
  } else {
    showData(todoListData);
    alert("查詢全部資料");
  }
}

// 修改資料
function updateData(id) {
  // 找 id 存在的 index 位置
  const listIndex = findIndex(id);
  const newTitle = document.getElementById(id + "_title").value;
  const newInfo = document.getElementById(id + "_info").value;

  // 修改資料及找不到 id 的處理
  if (listIndex < 0) {
    alert("找不到:" + id);
  } else {
    todoListData[listIndex].title = newTitle;
    todoListData[listIndex].info = newInfo;
    alert("更新完成");
  }
}

// 刪除資料，若刪除 id = 0 則刪除全部資料
function deleteData(id) {
  if (id === 0) {
    todoListData.length = 0;
    showData(todoListData);
    alert("已刪除全部資料");
    return false;
  }

  // 找 id 存在的 index 位置
  const listIndex = findIndex(id);

  // 若 id 存在就刪除
  if (listIndex > -1) {
    todoListData.splice(listIndex, 1);
    showData(todoListData);
    alert("成功刪除:" + id);
  } else {
    alert("找不到:" + id);
  }
}

// 資料表格顯示
function showData(arrayData) {
  const todoTable = document.getElementById("todoTable");

  if (arrayData.length === 0) {
    todoTable.innerHTML = "還沒有資料";
  } else {
    todoTable.innerHTML = `
  <tr>
    <th>id</th>
    <th>Title</th>
    <th>Info</th>
    <th>Edit</th>
  </tr>`;

    // 轉換格式
    if (!arrayData.length) {
      arrayData = [arrayData];
    }

    arrayData.map((item) => {
      todoTable.insertAdjacentHTML(
        "beforeend",
        `
    <tr>
          <td>
              ${item.id}
          </td>
          <td>
              <input id="${item.id}_title" value="${item.title}" />
          </td>
          <td>
              <input id="${item.id}_info" value="${item.info}" />
          </td>
          <td>
              <button onclick="updateData(${item.id})">修改</button>
              <button onclick="deleteData(${item.id})">刪除</button>
          </td>
    </tr>
  `
      );
    });
  }
}