/*
  
  ======PAGINATION======
  
  */

// selecting required element
const element = document.querySelector(".pagination ul");
let totalPages = 20;
let page = 10;
//calling function with passing parameters and adding inside element which is ul tag
element.innerHTML = createPagination(totalPages, page);
function createPagination(totalPages, page) {
  let liTag = "";
  let active;
  let beforePage = page - 1;
  let afterPage = page + 1;
  if (page > 1) {
    //show the next button if the page value is greater than 1
    liTag += `<li class="btn prev" onclick="createPagination(totalPages, ${
      page - 1
      // })"><span><i class="fas fa-angle-left"></i> Prev</span></li>`;
    })"><span><i class="fa-solid fa-arrow-left"></i></span></li>`;
  }
  if (page > 2) {
    //if page value is less than 2 then add 1 after the previous button
    liTag += `<li class="first numb" onclick="createPagination(totalPages, 1)"><span>1</span></li>`;
    if (page > 3) {
      //if page value is greater than 3 then add this (...) after the first li or page
      liTag += `<li class="dots"><span>...</span></li>`;
    }
  }
  // how many pages or li show before the current li
  if (page == totalPages) {
    beforePage = beforePage - 2;
  } else if (page == totalPages - 1) {
    beforePage = beforePage - 1;
  }
  // how many pages or li show after the current li
  if (page == 1) {
    afterPage = afterPage + 2;
  } else if (page == 2) {
    afterPage = afterPage + 1;
  }
  for (var plength = beforePage; plength <= afterPage; plength++) {
    if (plength > totalPages) {
      //if plength is greater than totalPage length then continue
      continue;
    }
    if (plength == 0) {
      //if plength is 0 than add +1 in plength value
      plength = plength + 1;
    }
    if (page == plength) {
      //if page is equal to plength than assign active string in the active variable
      active = "active";
    } else {
      //else leave empty to the active variable
      active = "";
    }
    liTag += `<li class="numb ${active}" onclick="createPagination(totalPages, ${plength})"><span>${plength}</span></li>`;
  }
  if (page < totalPages - 1) {
    //if page value is less than totalPage value by -1 then show the last li or page
    if (page < totalPages - 2) {
      //if page value is less than totalPage value by -2 then add this (...) before the last li or page
      liTag += `<li class="dots"><span>...</span></li>`;
    }
    liTag += `<li class="last numb" onclick="createPagination(totalPages, ${totalPages})"><span>${totalPages}</span></li>`;
  }
  if (page < totalPages) {
    //show the next button if the page value is less than totalPage(20)
    liTag += `<li class="btn next" onclick="createPagination(totalPages, ${
      page + 1
      // })"><span>Next <i class="fas fa-angle-right"></i></span></li>`;
    })"><span><i class="fa-solid fa-arrow-right"></i></i></span></li>`;
  }
  element.innerHTML = liTag; //add li tag inside ul tag
  return liTag; //reurn the li tag
}

/*

======HOW SECTIONS======

*/
const howBuy = document.querySelector(".how-buy");
const howSell = document.querySelector(".how-sell");
const howBuyBdy = document.querySelector(".howBuyBdy");
const howSellBdy = document.querySelector(".howSellBdy");

howBuy.addEventListener("click", (e) => {
  e.preventDefault();
  resetAllHow();
  howBuyBdy.classList.add("active");
  howBuy.classList.add("active");
});

howSell.addEventListener("click", (e) => {
  e.preventDefault();
  resetAllHow();
  howSellBdy.classList.add("active");
  howSell.classList.add("active");
});

const resetAllHow = () => {
  howBuyBdy.classList.remove("active");
  howBuy.classList.remove("active");
  howSellBdy.classList.remove("active");
  howSell.classList.remove("active");
};

/*

======FAQ SECTIONS======

*/
const accordionFq = document.getElementsByClassName("contentBx-fq");

for (i = 0; i < accordionFq.length; i++) {
  accordionFq[i].addEventListener("click", function () {
    this.classList.toggle("active");
  });
}

/*

======MAIN LOGIC========


*/
/*


=====SETTING CRYPTO BUTTON====


*/

const settingCoinButton = () => {
  const cryptoCntrlBtn = document.querySelector(".crypto-cntrl-btn");
  const cryptoSelect = document.querySelector(".crypto-select");
  const cryptoSelectCnt = document.querySelector(".crypto-sel-cnt");
  const cryptoBdyEch = document.querySelectorAll(".crypto-bdy-ech");
  const cryptoBtnImg = document.querySelector(".crypto-cntrl-btn-img");
  const cryptoBtnAbbv = document.querySelector(".crypto-cntrl-btn-abbv");

  cryptoCntrlBtn.addEventListener("click", () => {
    cryptoSelect.classList.add("active");
  });

  cryptoBdyEch.forEach((cryptoBdyEch) => {
    let newImg;
    let newDet;
    cryptoBdyEch.addEventListener("click", () => {
      newImg = cryptoBdyEch.children[0].children[0].getAttribute("src");
      newDet = cryptoBdyEch.children[1].children[1].textContent;
      cryptoBtnImg.children[0].src = newImg;
      cryptoBtnAbbv.children[0].textContent = newDet;
      cryptoSelect.classList.remove("active");
    });
  });
  cryptoSelect.addEventListener("click", (e) => {
    var isClickInsideElement = cryptoSelectCnt.contains(e.target);
    if (!isClickInsideElement) {
      cryptoSelect.classList.remove("active");
    }
  });
};

/*


=====SETTING CURRENCY BUTTON====


*/
const settingCurrencyButton = () => {
  const currCntrlBtn = document.querySelector(".currency-cntrl-btn");
  const currSelect = document.querySelector(".currency-select");
  const currSelectCnt = document.querySelector(".currency-sel-cnt");
  const currBdyEch = document.querySelectorAll(".currency-bdy-ech");
  const currBtnImg = document.querySelector(".currency-cntrl-btn-img");
  const currBtnAbbv = document.querySelector(".currency-cntrl-btn-abbrv");

  currCntrlBtn.addEventListener("click", () => {
    currSelect.classList.add("active");
  });

  currBdyEch.forEach((currBdyEch) => {
    let newImg;
    let newDet;
    currBdyEch.addEventListener("click", () => {
      newImg = currBdyEch.children[0].children[0].getAttribute("src");
      newDet = currBdyEch.children[1].children[1].textContent;
      currBtnImg.children[0].src = newImg;
      currBtnAbbv.children[0].textContent = newDet;
      currSelect.classList.remove("active");
    });
  });
  currSelect.addEventListener("click", (e) => {
    var isClickInsideElement = currSelectCnt.contains(e.target);
    if (!isClickInsideElement) {
      currSelect.classList.remove("active");
    }
  });
};
/*


=====SETTING PAYMENT METHOD BUTTON====


*/
const paymentCnt = document.querySelector(".payment-cnt");
const paymentSubCnt = document.querySelector(".pay-sel-cnt");
const paymentSelect = document.querySelector(".payment-select");
const paymentCntAbbrv = document.querySelector(".payment-cnt-abbrv");
const paySelEch = document.querySelectorAll(".pay-sel-ech");
// const pyTyp = document.querySelectorAll(".py-typ");
paymentCnt.addEventListener("click", () => {
  paymentSelect.classList.add("active");
});

paySelEch.forEach((paySelEch) => {
  paySelEch.addEventListener("click", () => {
    paymentCntAbbrv.children[0].textContent =
      paySelEch.children[1].children[0].textContent;

    // pyTyp.forEach((pyTyp) => {
    //   pyTyp.textContent = paySelEch.children[1].children[0].textContent;
    // });

    paymentSelect.classList.remove("active");
  });
});
paymentSelect.addEventListener("click", (e) => {
  var isClickInsideElement = paymentSubCnt.contains(e.target);
  if (!isClickInsideElement) {
    paymentSelect.classList.remove("active");
  }
});
/*


=====SETTING BUY OR SELL BUTTON====


*/
const mnBuy = document.querySelector(".mn-buy");
const mnSell = document.querySelector(".mn-sell");
const buyTable = document.querySelector(".buyTable");
const sellTable = document.querySelector(".sellTable");
const respCnt = document.querySelector(".responsive-cnt");
const respCntCnt = document.querySelector(".resp-cnt-cnt");
const filterIcn = document.querySelector(".filter-cnt");

mnBuy.addEventListener("click", (e) => {
  e.preventDefault();
  resetChooseBtn();
  mnBuy.classList.add("active");
});

mnSell.addEventListener("click", (e) => {
  e.preventDefault();
  resetChooseBtn();
  mnSell.classList.add("active");
});

const resetChooseBtn = () => {
  mnBuy.classList.remove("active");
  mnSell.classList.remove("active");
};
filterIcn.addEventListener("click", () => {
  respCnt.style.display = "flex";
  respCnt.addEventListener("click", (e) => {
    var isClickInsideElement = respCntCnt.contains(e.target);
    if (!isClickInsideElement) {
      respCnt.style.display = "none";
    }
  });
});

/*


=======FECTHING REALTIME DATAS======


*/

window.addEventListener("load", () => {
  const handleCurrencies = async () => {
    const data = async () => {
      let currencyHtml = "";

      // GETTING ALL CURRENCIES ARRAY
      const fetchedCurrencies = await getCurrencies();

      fetchedCurrencies.forEach((data) => {
        currencyHtml += `
        <div class="currency-bdy-ech" data-id = ${data.currency_name}>
                          <div class="currency-bdy-ech-img">
                            <img src=${data.img} alt="" />
                          </div>
                          <div class="currency-bdy-ech-det">
                            <h3>${data.ident}</h3>
                            <span class="curr-abb">${data.currency_name}</span>
                          </div>
                        </div>
        `;
      });
      document.querySelector(".currency-sel-bdy").innerHTML = currencyHtml;
    };
    data().then(() => {
      settingCurrencyButton();
    });
  };

  const handleCoins = async () => {
    let coinHtml = "";

    const fetchCoins = await fetch(
      "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cbinancecoin%2Ctether%2Cethereum%2Cdogecoin%2Clitecoin%2Cbusd&vs_currencies=usd&include_market_cap=true&include_24hr_vol=true&include_24hr_change=true&include_last_updated_at=true"
    );

    const obj = await fetchCoins.json();

    const data = async () => {
      const fetchedCoins = await getCoins();

      for (const [key, value] of Object.entries(fetchedCoins)) {
        coinHtml += buyCoinData(value.img, key, value.abbrv);
      }
      document.querySelector(".crypto-sel-bdy").innerHTML = coinHtml;
    };

    function buyCoinData(img, key, abbrv) {
      return `<div class="crypto-bdy-ech" data-id = ${key}>
      <div class="crpto-bdy-ech-img">
        <img
          src=${img}
          alt=""
        />
      </div>
      <div class="crpto-bdy-ech-det">
        <h3>${key}</h3>
        <span class="coin-abb">${abbrv}</span>
      </div>
    </div>`;
    }
    data().then(() => {
      settingCoinButton();
    });
  };
  handleCurrencies();
  handleCoins();
});