window.addEventListener("load", () => {
  const handleCoins = async () => {
    let fetchedData = [];
    const searchInput = app.query("#searchInput");
    searchOnlyPattern = new RegExp("^[a-zA-Z ]+$");
    let previousValue = "";

    const data = async () => {
      //GETTING ALL THE COIN
      const fetchedCoins = await getCoins();

      for (const [key, value] of Object.entries(fetchedCoins)) {
        fetchedData.push({ key, ...value });
      }
      //FILTER ARRAY WITH SEARCH INPUT
      searchInput.addEventListener("input", (e) => {
        const sortInput = async () => {
          let currentValue = searchInput.value;

          if (
            e.inputType.includes("delete") ||
            searchOnlyPattern.test(currentValue)
          ) {
            previousValue = currentValue;
          }
          searchInput.value = previousValue;
          const searchString = searchInput.value.toLowerCase();
          const filteredCoins = fetchedData.filter((data) => {
            return data.abbrv.toLowerCase().includes(searchString);
          });
          analyseData(filteredCoins);
        };
        sortInput().then(() => coinSetter());
      });

      //LOOPING DATA INTO HTML DOM
      const analyseData = (dataArr) => {
        if (dataArr.length > 0) {
          let eachWalletHtml = "";

          //LOOPING THROUGH ARRAY AND INPUTING VALUES INTO HTML
          dataArr.forEach((data) => {
            eachWalletHtml += `<div class="top-sel-ech" data-id = ${data.key} data-coin = ${data.abbrv}>
              <div class="top-sel-ech-img">
                <img
                  src="${data.img}"
                  alt=""
                />
              </div>
              <div class="top-sel-ech-abbv">
                <h3>${data.abbrv}</h3>
              </div>
            </div>`;
          });

          app.query(".top-sel-modal-cnt-bdy").innerHTML = eachWalletHtml;
        } else {
          app.query(
            ".top-sel-modal-cnt-bdy"
          ).innerHTML = ` <div class = "notFound">
            <i class="fa-solid fa-magnifying-glass"></i>
            <h3>No match found</h3>
        </div>`;
        }
      };

      analyseData(fetchedData);
    };

    data().then(() => {
      coinSetter();
      // networkSetter();
    });
  };

  document.getElementById("coinIntVal").value = "";
  document.getElementById("network").value = "";
  handleCoins();
});

//SETTING SELECT COIN
const coinSetter = () => {
  const topSelBtn = document.querySelector(".top-sel-sel");
  const topSelModal = document.querySelector(".top-sel-modal");
  const topSelModalCnt = document.querySelector(".top-sel-modal-cnt");
  const topSelEch = document.querySelectorAll(".top-sel-ech");
  const tpModCls = document.querySelector(".tpModCls");
  const topSelSelCov = document.querySelector(".top-sel-sel-cover");
  const btmSecCover = document.querySelector(".btm-select-sec-cover");
  const coinIntVal = document.getElementById("coinIntVal");
  const tpHddSpn = document.querySelector(".tp-hdds-spn");
  const btmAdrssSpn = document.querySelector(".btm-adrss-spn");
  const lftBtmSec = document.querySelector(".lft-btm-sel-sec");
  const rghtBtmSec = document.querySelector(".rght-btm-sel-sec");

  //Opening and closing of modals

  topSelSelCov.addEventListener("click", () => {
    topSelModal.classList.add("active");
  });
  tpModCls.addEventListener("click", () => {
    topSelModal.classList.remove("active");
  });
  topSelModal.addEventListener("click", (e) => {
    if (!topSelModalCnt.contains(e.target)) {
      topSelModal.classList.remove("active");
    }
  });

  //Handling picking of coins
  topSelEch.forEach((newCoin) => {
    let newImg;
    let newDet;
    newCoin.addEventListener("click", () => {
      newImg = newCoin.children[0].children[0].getAttribute("src");
      newDet = newCoin.children[1].children[0].innerHTML;
      app.query("#network").value = "";

      //Setting the coin to display
      topSelSelCov.innerHTML = ` 
        <div class="top-sel-sel" data-id = ${newCoin.dataset.id}>
          <div class="top-sel-sel-img" >
            <img src="${newImg}" alt=""/>
          </div>
          <div class="top-sel-sel-abbv">
            <h4>${newDet}</h4>
          </div>
          <div class="top-sel-sel-i">
            <i class="fa-solid fa-angle-down"></i>
          </div>  
        </div>`;

      const handleCoin = () => {
        lftBtmSec.innerHTML = app.loading();
        //GET ALL COINS
        app.getCookie("azer_token", (e, r) => {
          let fetchedData = [];
          let btmHtml = "";

          if (e) {
            let netTem = "";
            let symbol = newCoin.dataset.coin;
            app.client
              .fetch(`/api/coin/id`, "POST", { token: r, symbol: symbol })
              .then((sx) => {
                let a = sx[0].networks.split(",");

                a.forEach((ex) => {
                  netTem += `
                    <div class="net-mod-ech" data-net-name="${ex}">
                      <h3 data-net-name="${ex}">${ex}</h3>
                      <h3 data-net-name="${ex}">${ex}</h3>
                    </div>`;
                });
                app.query(".azer_net_holder").innerHTML = netTem;
                networkSetter(symbol);
              });

            app.client
              .fetch(`/user/wallet/${newCoin.dataset.coin}`, "POST", {
                token: r,
              })
              .then((dx) => {
                //MAPPING OUT THE DATA AND PUSHING IT INTO AN ARRAY
                for (const [key, value] of Object.entries(dx)) {
                  fetchedData.push({ key, ...value });
                }
                fetchedData.forEach((data) => {
                  lftBtmSec.innerHTML = `
                  <h5>
                    <span class="abbvChng">${newDet}</span> 
                    balance:<br> ${Number(
                      Number(data.totalAvailableBalance).toFixed(8)
                    ).toLocaleString()}
                    <span class="abbvChng">${newDet}</span>
                  </h5>`;
                });
              });
          }
        });
      };

      handleCoin();

      //Replace coin name with picked coin name
      coinIntVal.value = newDet;
      tpHddSpn.innerHTML = newDet;
      btmAdrssSpn.innerHTML = newDet;

      topSelModal.classList.remove("active");

      //Calc the value of one newCoin
      const calValue = async () => {
        const abbvCurr = document.querySelector(".abbvCurr");
        const abbvCurrVal = document.querySelector(".abbvCurrVal");
        const topSelBtn = document.querySelector(".top-sel-sel");

        let currencyValue = 0;
        let coinValue = 0;
        let coinArr = [];

        const fetchCurr = await fetch("../../api/currency/id?id=ngn");
        const res = await fetchCurr.json();
        const fetchCoin = await fetch(
          `https://api.coingecko.com/api/v3/simple/price?ids=${topSelBtn.dataset.id}%2C&vs_currencies=usd&include_market_cap=true&include_24hr_vol=true&include_24hr_change=true&include_last_updated_at=true`
        );
        const obj = await fetchCoin.json();
        for (const key of Object.keys(obj)) {
          coinArr.push({ key: key, ...obj[key] });
        }
        coinArr.forEach((data) => {
          coinValue = data.usd;
        });
        res.forEach((data) => {
          rghtBtmSec.innerHTML = `<h5>
          Val Price:<br> <span class="abbvCurr">${data.currency_name}</span>  
          <span class="abbvCurrVal">${(
            coinValue * data.currency_rate_ngn
          ).toLocaleString()}</span> /
          <span class="abbvChng">${newDet}</span>
        </h5>`;
        });
      };
      calValue();
    });
  });
};

//SETTING NETWORK
const networkSetter = (symbol) => {
  const ultimNetSel = document.querySelector(".ultim-net-sel");
  const ultimNetModal = document.querySelector(".ultim-net-modal");
  const ultimNetModaCnt = document.querySelector(".ultim-net-modal-cnt");
  const ultimCls = document.querySelector(".ultimCls");
  const btmAdrssNet = document.querySelector(".btm-adrss-net");
  const netModEch = document.querySelectorAll(".net-mod-ech");
  const networkInt = document.getElementById("network");
  const ultimAddress = document.querySelector(".ultim-adrss-sec");

  //Opening and closing of Network Modals

  ultimNetSel.addEventListener("click", () => {
    ultimNetModal.classList.add("active");
  });
  ultimCls.addEventListener("click", () => {
    ultimNetModal.classList.remove("active");
  });
  ultimNetModal.addEventListener("click", (e) => {
    if (!ultimNetModaCnt.contains(e.target)) {
      ultimNetModal.classList.remove("active");
    }
  });

  //Handling picking of Networks
  netModEch.forEach((netModEch) => {
    netModEch.addEventListener("click", () => {
      let newDet;
      newDet = netModEch.children[1].innerHTML;

      app.getCookie("azer_token", (e, r) => {
        if (e) {
          let obj = {
            symbol: symbol,
            network: newDet,
            token: r,
          };
          // user/wallet/crypto_wallet_provider
          app.client
            .fetch(`../../user/wallet/crypto_wallet_provider`, "POST", obj)
            .then((dxb) => {
              if (dxb.isSuccess) {
                let walid = app.query(".azer_wallet");
                walid.innerHTML = dxb.coinObj.coin;
                app
                  .query(".azer_wallet_copy")
                  .addEventListener("click", function (e) {
                    navigator.clipboard.writeText(dxb.coinObj.coin);
                    app.client.toastS("success", "Copied Successfully", null);
                  });
                app.query(
                  ".azer_wallet_qr"
                ).src = `https://chart.googleapis.com/chart?chs=250x250&cht=qr&chl=${dxb.coinObj.coin}`;
              }
            });

          // app.redirectUrl(`../dashio/home?azer_token=${r}`);
        }
      });

      ultimNetModal.classList.remove("active");
      ultimAddress.classList.add("active");

      networkInt.value = newDet;
      btmAdrssNet.innerHTML = newDet;
    });
  });
};

//SETTING GUIDE SECTION

const mainGuide = document.querySelector(".main-guide");
const mainGuideMain = document.querySelector(".main-guide-main");
const mainGuideClosed = document.querySelector(".main-guide-closed");
const guideCls = document.querySelector(".guideCls");

//SETTING THE BUY / SELL GUIDE SECTION
guideCls.addEventListener("click", () => {
  resetGuide();
  mainGuideClosed.classList.add("active");
});
mainGuideClosed.addEventListener("click", () => {
  resetGuide();
  mainGuideMain.classList.add("active");
});

function resetGuide() {
  mainGuideMain.classList.remove("active");
  mainGuideClosed.classList.remove("active");
}