/** 取得資料預存 */
let allListData = [];
let activityListData = [];
let prizeListData = [];
let qalistData = [];

/** 取得資料 */
const getJSON = async () => {
  const data = await fetch("/inc/json/qa.json").then(function (response) {
    return response.json();
  });
  if (!data) {
    return;
  }
  const { allQA, activityQA, prizeQA } = data;
  allListData = allQA;
  activityListData = activityQA;
  prizeListData = prizeQA;
  qalistData = [...allQA, ...activityQA, ...prizeQA];
  initSetList(data);
};

getJSON();

//* 取得 hash 
//20240126_Client DOM Open Redirect 未使用故注解_Jay
//function getHash() {
//  const hash = window.location.hash;
//  if (hash === "") {
//    return "";
//  }
//  return hash;
//}
//* 跳轉至hash 
//function linkHash() {
//  const hash = getHash();
//  if (hash === "") {
//    return "";
//  }
//  const hashAry = hash.replace("#", "").split("-");
//  const tab = hashAry[0];
//  const tablist = document.querySelector("#tablist");
//  const tabContent = document.querySelector("#tabContent");
//  let tabIndex = 0;
//  switch (tab) {
//    case "all":
//      tabIndex = 0;
//      break;
//    case "activity":
//      tabIndex = 1;
//      break;
//    case "prize":
//      tabIndex = 2;
//      break;
//  }
//  tablist.querySelectorAll("li").forEach((li, i) => {
//    if (tabIndex === i) {
//      li.className = "active";
//      li.querySelector("a").setAttribute("aria-expanded", true);
//    } else {
//      li.className = "";
//      li.querySelector("a").setAttribute("aria-expanded", false);
//    }
//  });
//  tabContent.querySelectorAll(".tab-pane").forEach((item, i) => {
//    if (tabIndex === i) {
//      item.className = "tab-pane fade active in";
//    } else {
//      item.className = "tab-pane fade";
//    }
//  });

//  let div;
//  switch (tab) {
//    case "all":
//      div = document.querySelector("#qa-all");
//      break;
//    case "activity":
//      div = document.querySelector("#qa-activity");
//      break;
//    case "prize":
//      tabIndex = 2;
//      div = document.querySelector("#qa-prize");
//      break;
//  }
//  div.querySelectorAll(".panel").forEach((item) => {
//    const a = item.querySelector("a");
//    const id = hash.replace("#", "");
//    if (a.id === id) {
//      a.click();
//    }
//  });
//  const a = document.createElement("a");
//  a.href = hash;
//  a.click();
//}

/** 初始設定資料 */
function initSetList(data) {
  const { allQA, activityQA, prizeQA } = data;
  setQaAllList(allQA);
  setQaActivityList(activityQA);
  setQaPrize(prizeQA);
  //linkHash();
}
/** 總體篇 */
function setQaAllList(data) {
  const qaAll = document.querySelector("#qa-all");
  let allHtml = "";
  data.forEach((el, i) => {
    let id = "";
    switch (i) {
      case 0:
        id = "all-qa1";
        break;
      case 1:
        id = "all-qa2";
        break;
      case 9:
        id = "all-qa10";
        break;

      default:
        break;
    }
    let list = "";
    if (el.answer.list) {
      el.answer.list.forEach((li, idx) => {
        let sbList = "";
        let title = li.title ? `<p>${li.title}</p>` : "";
        let link = li.link
            ? 
            `            
            <div class="row" style="justify-content: space-evenly;">
                <div class="col-sm-12 col-md-6 text-center mb20">
                    <a href="e_list.html" class="couponbox couponbox2">
                        <img src="./inc/img/global/e-coupon.png" alt="" class="coupon">
                        <span>電子優惠券</span>
                    </a>
                    <br /><br /><span>（自2023年8月1日起發放）</span>
                </div>
            </div>
`
          : "";
        if (li.sbList) {
          li.sbList.forEach((sb) => {
            if (sb.name) {
              sbList += `
                  <div class="right-content">
                      ${sb.name}：
                  </div>
              `;
            }
            if (sb.url) {
              sbList += `
              <div class="right-content">
                  <a class="btn-link" href="${sb.url}" title="${sb.name}[另開視窗]" target="_blank" rel="noreferrer noopener">
                      ${sb.url}
                  </a>
              </div>
               `;
            }
          });
        }

        const str = getChineseNum(idx);
        list += `<li>
              <span>${str}</span>
              <div class="right-content">${title} ${li.text} ${link}
                  <ul class="list">
                    <li> ${sbList}</li>
                </ul>
              </div>
          </li>`;
      });
    }
    let text = el.answer.text ? `${el.answer.text}` : "";

    allHtml += `
    <div class="panel">
        <a id='${id}' role="button" class="collapsed" data-toggle="collapse" href="#qa-all-${i}" aria-expanded="false" aria-controls="qa-all-1" title="${el.name}. ${el.question}">
            ${el.name}. ${el.question}
        </a>
        <div id="qa-all-${i}" class="panel-collapse collapse" role="tabpanel" data-parent="#qa-all">
            <div class="panel-body">
                ${text}
                <ul class="list-c">
                ${list}
                </ul>
            </div>
        </div>
    </div>
    `;
  });
  qaAll.innerHTML = allHtml;
}
/** 活動篇 */
function setQaActivityList(data) {
  const qaActivity = document.querySelector("#qa-activity");
  let activityHtml = "";
  data.forEach((el, i) => {
    let id = "";
    switch (i) {
      case 0:
        id = "activity-qa1";
        break;
      case 2:
        id = "activity-qa3";
        break;
      case 3:
        id = "activity-qa4";
        break;

      default:
        break;
    }
    let text = el.answer.text ? `${el.answer.text}` : "";
    activityHtml += `
    <div class="panel">
        <a id='${id}' role="button" class="collapsed" data-toggle="collapse" href="#qa-activity-${i}" aria-expanded="false" aria-controls="qa-activity-1" title=" ${el.name}. ${el.question}">
            ${el.name}. ${el.question}
        </a>
        <div id="qa-activity-${i}" class="panel-collapse collapse" role="tabpanel" data-parent="#qa-activity">
            <div class="panel-body">
                ${text}
            </div>
        </div>
    </div>
    `;
  });
  qaActivity.innerHTML = activityHtml;
}
/** 獎品使用篇 */
function setQaPrize(data) {
  const prize = document.querySelector("#qa-prize");
  let prizeHtml = "";
  data.forEach((el, i) => {
    let id = "";
    switch (i) {
      case 0:
        id = "prize-qa1";
        break;
      case 6:
        id = "prize-qa7";
        break;

      default:
        break;
    }
    let list = "";
    if (el.answer.list) {
      el.answer.list.forEach((li, idx) => {
        let sbList = "";
        let title = li.title ? `<p>${li.title}</p>` : "";
        if (li.sbList) {
          li.sbList.forEach((sb) => {
            if (sb.name) {
              sbList += `
                  <div class="right-content">
                      ${sb.name}：
                  </div>
              `;
            }
            if (sb.url) {
              sbList += `
              <div class="right-content">
                  <a class="btn-link" href="${sb.url}" title="${sb.name}[另開視窗]" target="_blank" rel="noreferrer noopener">
                      ${sb.url}
                  </a>
              </div>
               `;
            }
          });
        }

        list += `<li>
              <div class="right-content">${title} ${li.text || ""}
                  <ul class="list">
                    <li> ${sbList}</li>
                </ul>
              </div>
          </li>`;
      });
    }
    let text = el.answer.text ? `${el.answer.text}` : "";
    let link = el.answer.link
        ? `            
        <div class="row" style="justify-content: space-evenly;">
            <div class="col-sm-12 col-md-6 text-center mb20">
                <a href="e_list.html" class="couponbox couponbox2">
                    <img src="./inc/img/global/e-coupon.png" alt="" class="coupon">
                    <span>電子優惠券</span>
                </a>
                <br /><br /><span>（自2023年8月1日起發放）</span>
            </div>
        </div>
`
      : "";

    let listHtml = el.answer.list
      ? `<ul class="list-c">
        ${list}
        </ul>`
      : "";

    prizeHtml += `
    <div class="panel"  id='panel-${id}'>
        <a  id='${id}' role="button" class="collapsed" data-toggle="collapse" href="#qa-prize-${i}" aria-expanded="false" aria-controls="qa-prize-1" title=" ${el.name}. ${el.question}">
            ${el.name}. ${el.question}
        </a>
        <div id="qa-prize-${i}" class="panel-collapse collapse" role="tabpanel" data-parent="#qa-prize">
            <div class="panel-body">
                ${text} ${link}
                ${listHtml}
            </div>
        </div>
    </div>
    `;
  });
  prize.innerHTML = prizeHtml;
}
/** 搜尋按鈕 */
function handleQaSearch() {
  const input1 = document.querySelector("#search-input1");
  const searchStr = input1.value;
  if (searchStr === "") {
    handleReset();
    return;
  }
  filterFunc(searchStr);
}
/** filter */
function filterFunc(searchStr) {
  if (searchStr === "") {
    return;
  }
  const allFilter = allListData.filter((el) => {
    const findText = el.answer.text && el.answer.text.includes(searchStr);
    const findLink = el.answer.link && el.answer.link.includes(searchStr);
    const findList =
      el.answer.list &&
      el.answer.list.find((item) => {
        const { text, link, sbList } = item;
        const findTxt = text && text.includes(searchStr);
        const findLink = link && link.includes(searchStr);
        const findSbList =
          sbList &&
          sbList.find((key) => {
            const name = key.name.includes(searchStr);
            const url = key.url && key.url.includes(searchStr);
            return name || url;
          });
        return findTxt || findLink || findSbList;
      });
    return findList || findText || findLink || el.question.includes(searchStr);
  });
  const activityFilter = activityListData.filter((el) => {
    const findText = el.answer.text && el.answer.text.includes(searchStr);
    const findLink = el.answer.link && el.answer.link.includes(searchStr);
    const findList =
      el.answer.list &&
      el.answer.list.find((item) => {
        const { text, sbList } = item;
        const findTxt = text && text.includes(searchStr);
        const findSbList =
          sbList &&
          sbList.find((key) => {
            const name = key.name.includes(searchStr);
            const url = key.url.includes(searchStr);
            return name || url;
          });
        return findTxt || findSbList;
      });
    return findList || findText || findLink || el.question.includes(searchStr);
  });
  const prizeFilter = prizeListData.filter((el) => {
    const findText = el.answer.text && el.answer.text.includes(searchStr);
    const findLink = el.answer.link && el.answer.link.includes(searchStr);
    const findList =
      el.answer.list &&
      el.answer.list.find((item) => {
        const { text, sbList } = item;
        const findTxt = text && text.includes(searchStr);
        const findSbList =
          sbList &&
          sbList.find((key) => {
            const name = key.name.includes(searchStr);
            const url = key.url.includes(searchStr);
            return name || url;
          });
        return findTxt || findSbList;
      });

    return findList || findText || findLink || el.question.includes(searchStr);
  });
  const fillterData = [...allFilter, ...activityFilter, ...prizeFilter];
  setList(fillterData, searchStr);
}
/** 字串加上顏色 */
function splitStr(elStr, searchStr) {
  if (!elStr) {
    return "";
  }
  const keywords = `<span class="keywords-st">` + searchStr + `</span>`;
  const newStr = elStr.replace(searchStr, keywords);
  return newStr;
}
/** 搜尋資料 */
function setList(fillterData, searchStr) {
  const tablist = document.querySelector("#tablist");
  const tabContent = document.querySelector("#tabContent");
  const resultWrap = document.querySelector("#resultWrap");
  const reset = document.querySelector("#reset");
  const result = document.querySelector("#qa-result");
  const statNum = document.querySelector("#stat-num");
  const statKey = document.querySelector("#stat-key");

  let html = "";
  fillterData.forEach((el, i) => {
    const question = splitStr(el.question, searchStr);
    let list = "";
    if (el.answer.list) {
      el.answer.list.forEach((li, idx) => {
        let sbList = "";
        const liTitle = splitStr(li.title, searchStr);
        let title = li.title ? `<p>${liTitle}</p>` : "";
        const lilink = splitStr(li.link, searchStr);
        let link = li.link
          ? `<a class="btn-link" href="a_list.html" title="旅宿清單">
              ${lilink}
          </a>`
          : "";
        if (li.sbList) {
          li.sbList.forEach((sb) => {
            if (sb.name) {
              const sbName = splitStr(sb.name, searchStr);
              sbList += `
                  <div class="right-content">
                      ${sbName}：
                  </div>
              `;
            }
            if (sb.url) {
              const sbUrl = splitStr(sb.url, searchStr);
              sbList += `
              <div class="right-content">
                  <a class="btn-link" href="${sb.url}" title="${sb.name}[另開視窗]" target="_blank" rel="noreferrer noopener">
                      ${sbUrl}
                  </a>
              </div>
               `;
            }
          });
        }

        const str = getChineseNum(idx);
        const liText = splitStr(li.text, searchStr);
        list += `<li>
              <span>${str}</span>
              <div class="right-content">${title} ${liText} ${link}
                  <ul class="list">
                    <li> ${sbList}</li>
                </ul>
              </div>
          </li>`;
      });
    }
    const answerText = splitStr(el.answer.text, searchStr);
    let text = el.answer.text ? `${answerText}` : "";
    const answerLink = splitStr(el.answer.link, searchStr);
    let link = el.answer.link
      ? `<a class="btn-link" href="a_list.html" title="旅宿清單">
        ${answerLink}
    </a>`
      : "";

    html += `
    <div class="panel">
        <a role="button" class="collapsed" data-toggle="collapse" href="#qa-all-${i}" aria-expanded="false" aria-controls="qa-all-1" title="Q${
      i + 1
    }. ${el.question}">
            Q${i + 1}. ${question}
        </a>
        <div id="qa-all-${i}" class="panel-collapse collapse" role="tabpanel" data-parent="#qa-all">
            <div class="panel-body">
                ${text}${link}
                <ul class="list-c">
                ${list}
                </ul>
            </div>
        </div>
    </div>
    `;
  });
  result.innerHTML = html;
  statNum.innerText = fillterData.length;
  statKey.innerText = searchStr;
  tablist.style.display = "none";
  tabContent.style.display = "none";
  resultWrap.style.display = "block";
  reset.style.display = "block";
}
/** 清除 */
function handleReset() {
  const tablist = document.querySelector("#tablist");
  const tabContent = document.querySelector("#tabContent");
  const resultWrap = document.querySelector("#resultWrap");
  const reset = document.querySelector("#reset");
  const result = document.querySelector("#qa-result");
  const statNum = document.querySelector("#stat-num");
  const statKey = document.querySelector("#stat-key");
  const input1 = document.querySelector("#search-input1");
  result.innerHTML = "";
  statNum.innerText = "";
  statKey.innerText = "";
  tablist.style.display = "flex";
  tabContent.style.display = "block";
  resultWrap.style.display = "none";
  reset.style.display = "none";
  input1.value = "";
}

function getChineseNum(idx) {
  const strAry = [
    "(一)",
    "(二)",
    "(三)",
    "(四)",
    "(五)",
    "(六)",
    "(七)",
    "(八)",
    "(九)",
    "(十)",
    "(十一)",
    "(十二)",
    "(十三)",
    "(十四)",
    "(十五)",
    "(十六)",
    "(十七)",
    "(十八)",
    "(十九)",
  ];
  const str = strAry[idx];
  return str;
}