(function() {
  //針對api 設定 常數｜提升維護性
  const BASE_URL = "https://lighthouse-user-api.herokuapp.com/";
  const INDEX_URL = BASE_URL + "api/v1/users";
  const SHOW_URL = BASE_URL + "api/v1/users/";
  const data = [];

  let dataPerPage = 6; //分頁功能-每頁每類資料筆數-分兩類共12筆
  //localStorage 區
  const lstorage_displayPrefer =
    JSON.parse(localStorage.getItem("displayprefer")) || localstorage_initial();
  const localKeyValue = [];

  //dom api 選取要呈現的區塊

  axios
    .get(INDEX_URL)
    .then(response => {
      data.push(...response.data.results);
      dataProcess_Work_friend(data); //添加-source屬性
      displayFriendsList(data);
      gotTotalPages(data);
      gotPageData(1, data, "card");
    })
    .catch();
  //=======================================================================================================================================
  // 設定監聽事件 區--------------------------------------------------------------------
  //===============================================================================
  // switchMode | 用來判斷使用者切換什麼模式
  const switchMode = document.getElementById("switchMode");
  switchMode.addEventListener("click", event => {
    console.log(event.target.id);
    if (event.target.id === "work") {
      displaydata(data, "work"); //顯示同事清單
    } else if (event.target.id === "friend") {
      displaydata(data, "friend"); //顯示朋友清單
    }
  });
  console.log(switchMode);
  // data_pannel | 用來顯示用戶資料
  const data_pannel = document.querySelector("#data-panel");
  data_pannel.addEventListener("click", event => {
    let datasetid = event.target.dataset.id;
    if (event.target.matches(".btn-dated")) {
      dated(datasetid);
    } else if (event.target.matches(".btn-show-friend")) {
      personalinfo(datasetid);
    }
  });
  // search bar | 註冊監聽事件作處理
  const searchInput = document.getElementById("search");
  const searchBtn = document.getElementById("submit-search");

  searchBtn.addEventListener("click", event => {
    event.preventDefault(); //取消預設動作

    const rule_name = new RegExp(searchInput.value, "i"); //建立正規表達-值+規則(不分大小寫)
    const rule_surname = new RegExp(searchInput.value, "i");

    results = data.filter(user => user.name.match(rule_name));
    results.push(data.filter(user => user.surname.match(rule_surname)));
    displayFriendsList(results);
  });

  // 分頁事件監聽
  const pagination = document.getElementById("pagination");
  pagination.addEventListener("click", event => {
    if (event.target.tagName === "A") {
      let page = event.target.dataset.page;
      let display = localstorage_getvalue("displayprefer", "display");
      localstorage_update("displayprefer", "page", page);
      gotPageData(page, data, display);
    }
  });

  // 檢視模板監聽 | 監聽模板切換事件-寫入localstorage 將資料丟給不同模板涵是
  const displayMode = document.getElementById("displayMode");
  displayMode.addEventListener("click", event => {
    let displayMode = event.target.id;
    if (displayMode === "card") {
      console.log("切換卡片模式");
      localstorage_update("displayprefer", "display", "card"); //更新localstorage
      let page = localstorage_getvalue("displayprefer", "page"); //取得page值
      gotPageData(page, data, "card"); //進行單頁渲染
    } else if (displayMode === "list") {
      console.log("切換清單模式");
      localstorage_update("displayprefer", "display", "list");
      let page = localstorage_getvalue("displayprefer", "page");
      gotPageData(page, data, "list");
      //   localstorage_getvalue("displayprefer", "display");
      //   console.log("取值", localKeyValue[0]);
    }
  });
  //=======================================================================================================================================
  // function 區--------------------------------------------------------------------
  //===============================================================================
  //local storage 初始化
  function localstorage_initial() {
    let lstorage_displayPrefer = [];
    let new_storage = { mode: "work", display: "card", page: 1 };
    lstorage_displayPrefer.push(new_storage);
    localStorage.setItem(
      "displayprefer",
      JSON.stringify(lstorage_displayPrefer)
    );
  }

  //local storage 更新
  function localstorage_update(local_key, property, changeValue) {
    let key_changed = JSON.parse(localStorage.getItem(local_key));
    key_changed[0][property] = changeValue;
    localStorage.setItem(local_key, JSON.stringify(key_changed));
  }
  //local storage 取值 | 存入 localKeyValue[0]
  function localstorage_getvalue(local_key, property) {
    let key_changed = JSON.parse(localStorage.getItem(local_key));
    localKeyValue.push(key_changed[0][property]);
    return key_changed[0][property];
    //console.log("取值", localKeyValue[0]);
  }
  //資料處理 - 添加來源處理 | 處理api 拿到的資料-加入source屬性，標註 work or friend
  function dataProcess_Work_friend(data) {
    for (let i = 0; i < data.length; i++) {
      if (i < 100) {
        data[i].source = "work";
      } else if (100 < i && i < 200) {
        data[i].source = "friend";
      }
    }
  }

  //顯示好友清單 | 判別是同事 或 好友
  function displaydata(data, source) {
    let workContent = "";
    let friendContent = "";
    data.forEach(function(item, index, array) {
      if (item.source === "work") {
        workContent += `
        <div class="col-sm-3 self" id="${item.id}">
          <div class="card mb-2 "> 
          <img class="card-img-top " src="${
            item.avatar
          }" alt="card image cap">  
          <div class="card-body movie-item-body">
          <i class="fas fa-male"></i>
            <h6>${item.surname}/${item.name}</h6>
          </div>
          <div>
          <i class="fas fa-star btn-dated" data-id="${item.id}" ></i>
          <button class="btn btn-primary  btn-show-friend" data-toggle="modal" data-target="#show-movie-modal" data-id="${
            item.id
          }" data-source="work">Personal info</button>
          </div>
          </div>
          </div>
            `;
      } else if (item.source === "friend") {
        friendContent += `
            <div class="col-sm-3 self" id="${item.id}" >
            <div class="card mb-2 "> 
            <img class="card-img-top " src="${
              item.avatar
            }" alt="card image cap">  
            <div class="card-body movie-item-body">
            <i class="fas fa-female"></i>
              <h6>${item.surname}/${item.name}</h6>
            </div>
            <div>
            <i class="fas fa-star btn-dated"  data-id="${item.id}"></i>
            <button class="btn btn-primary  btn-show-friend" data-toggle="modal" data-target="#show-movie-modal" data-id="${
              item.id
            }" data-source="friend">Personal info</button>
            </div>
            </div>
            </div>
            `;
      }
    });
    if (source === "work") {
      data_pannel.innerHTML = workContent;
    } else if (source === "friend") {
      data_pannel.innerHTML = friendContent;
    }
  }

  //分頁功能-生成頁碼  | - 取得API資料後使用
  function gotTotalPages(data) {
    let pages = Math.ceil(data.length / (dataPerPage * 2)) || 1;
    console.log(pages);
    let paginationHTMLContent = "";
    for (let i = 0; i < pages; i++) {
      paginationHTMLContent += `
        <li class="page-item"> <a href='javascript:;' class="page-link" data-page=${i +
          1}>${i + 1}</a> </li>
        `;
    }
    pagination.innerHTML = paginationHTMLContent;
  }

  //分頁功能-渲染資料 | 自loacalstorage判斷，需要選染第幾頁資料 | 各取出6筆資料
  function gotPageData(page, data, display) {
    let startItemIndex_work = (page - 1) * dataPerPage; //0-10
    let startItemIndex_friend = (page - 1) * dataPerPage + 101; //101-200
    let pageResults_work = data.slice(
      startItemIndex_work,
      startItemIndex_work + dataPerPage
    );
    let pageResults_friend = data.slice(
      startItemIndex_friend,
      startItemIndex_friend + dataPerPage
    );
    let pageData = pageResults_work.concat(pageResults_friend);

    if (display === "card") {
      displayFriendsList(pageData);
    } else if (display === "list") {
      listMode(pageData);
    }
  }

  //===============================================================================

  //display - 展示朋友清單
  function displayFriendsList(data) {
    const work_panel = document.querySelector("#data-panel-work");
    const friend_panel = document.querySelector("#data-panel-friend");

    let workHtmlContent = "";
    let friendHtmlContent = "";

    data.forEach(function(item, index) {
      if (item.source === "work") {
        workHtmlContent += `
        <div class="col-sm-6 self" id="${item.id}">
          <div class="card mb-2 card_m_img"> 
          <img class="card-img-top " src="${
            item.avatar
          }" alt="card image cap">  
          <div class="card-body movie-item-body">
          <i class="fas fa-male"></i>
            <h6>${item.surname}/${item.name}</h6>
          </div>
          <div>
          <i class="fas fa-star btn-dated" data-id="${item.id}" ></i>
          <button class="btn btn-primary  btn-show-friend" data-toggle="modal" data-target="#show-movie-modal" data-id="${
            item.id
          }" >Personal info</button>
          </div>
          </div>
          </div>
        `;
      } else if (item.source === "friend") {
        friendHtmlContent += `
        <div class="col-sm-6 self" id="${item.id}" >
          <div class="card mb-2 card_f_img"> 
          <img class="card-img-top " src="${
            item.avatar
          }" alt="card image cap">  
          <div class="card-body movie-item-body">
          <i class="fas fa-female"></i>
            <h6>${item.surname}/${item.name}</h6>
          </div>
          <div>
          <i class="fas fa-star btn-dated"  data-id="${item.id}"></i>
          <button class="btn btn-primary  btn-show-friend" data-toggle="modal" data-target="#show-movie-modal" data-id="${
            item.id
          }" >Personal info</button>
          </div>
          </div>
          </div>
        `;
      }
    });

    work_panel.innerHTML = workHtmlContent;
    friend_panel.innerHTML = friendHtmlContent;
  }
  function listMode(data) {
    const work_panel = document.querySelector("#data-panel-work");
    const friend_panel = document.querySelector("#data-panel-friend");

    let workHtmlContent = "";
    let friendHtmlContent = "";

    data.forEach(function(item, index) {
      if (item.source === "work") {
        workHtmlContent += ` <li  class="list-group-item">${item.name}/${
          item.surname
        }
            <div class="float-right">
            <button class="btn btn-primary btn-show-movie" data-toggle="modal" data-target="#show-movie-modal" data-id="${
              item.id
            }">More</button>
            <button class='btn btn-info btn-add-favorite' data-id="${
              item.id
            }">+</button> </div>
            </li>`;
      } else if (item.source === "friend") {
        friendHtmlContent += `
            <li  class="list-group-item">${item.name}/${item.surname}
            <div class="float-right">
            <button class="btn btn-primary btn-show-movie" data-toggle="modal" data-target="#show-movie-modal" data-id="${
              item.id
            }">More</button>
            <button class='btn btn-info btn-add-favorite' data-id="${
              item.id
            }">+</button> </div>
            </li>
            `;
      }
    });
    let listContent_final_work = `
    <ul style="width:100%;"  class="list-group list-group-flush"> ${workHtmlContent}</ul>`;
    let listContent_final_friend = `
    <ul style="width:100%;"  class="list-group list-group-flush"> ${friendHtmlContent}</ul>`;
    work_panel.innerHTML = listContent_final_work;
    friend_panel.innerHTML = listContent_final_friend;
  }
  //===================

  //favorite - 標記約會對象
  function dated(datasetid) {
    let datePanel = document.querySelector("#data-panel-dated");
    let dateuser = document.getElementById(datasetid).innerHTML;
    let datecard =
      datePanel.innerHTML + `<div class="col-sm-3">${dateuser} </div>`;

    datePanel.innerHTML = datecard;
  }

  //more - 顯示朋友詳細資料
  function personalinfo(id) {
    //基本資料-照片+姓名+生日+地點

    //選取資料
    let name = document.querySelector("#show-friend-title");
    let birthday = document.querySelector("#show-friend-birthday");
    let email = document.querySelector("#show-friend-email");
    let locate = document.querySelector("#show-friend-description");
    let img = document.querySelector("#show-friend-image");

    //建立資料
    axios
      .get(SHOW_URL + id)
      .then(response => {
        name.innerText = `${response.data.name} /${response.data.surname}`;
        birthday.innerText = `birthday ${response.data.birthday}`;
        locate.innerText = `locate at : ${response.data.region}`;
        email.innerText = `email: ${response.data.email}`;
        img.innerHTML = `<img  src="${
          response.data.avatar
        }" alt="card image cap">`;
      })
      .catch();
  }
})();