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

      const fetchedCoins = await getCoins();

      for (const [key, value] of Object.entries(fetchedCoins)) {
        buyCoinHtml += buyCoinData(value.img, key, value.abbrv);
      }
      document.querySelector(".asset-drop-coin").innerHTML = buyCoinHtml;
    };

    function buyCoinData(img, key, abbrv) {
      return `<div class="drp-typ-ech assetEch" data-id = "${key}">
          <div class="drp-cnn">
            <div class="drp-cnn-img">
              <img
                src=${img}
                alt=""
              />
            </div>
            <div class="drp-cnn-abbv">
              <h3>${abbrv}</h3>
            </div>
          </div>
          <i class="fa-solid fa-circle-check"></i>
        </div>`;
    }

    data().then(() => {
      settingCryptoFilters();
    });
  };

  const handleCurrencies = async () => {
    const data = async () => {
      let buyCurrencyHtml = "";

      const fetchedCurrencies = await getCurrencies();

      fetchedCurrencies.forEach((data) => {
        buyCurrencyHtml += `<div class="drp-typ-ech assetEchFiat" data-id =${data.currency_name}>
        <div class="drp-cnn">
          <div class="drp-cnn-img">
            <img src=${data.img} alt="" />
          </div>
          <div class="drp-cnn-abbv">
            <h3>${data.currency_name}</h3>
          </div>
        </div>
        <i class="fa-solid fa-circle-check"></i>
      </div>`;
      });
      document.querySelector(".asset-drop-fiat").innerHTML = buyCurrencyHtml;
    };
    data().then(() => {
      settingFiatFilters();
    });
  };

  const fetchFiatHistory = async () => {
    await getTransactionHistory("fiat", "withdraw", 90);
  };
  settingHeadButtons();
  handleCoins();
  handleCurrencies();
  fetchFiatHistory();
});

//SETTING HEAD BUTTONS & TABLES
const settingHeadButtons = () => {
  const cyBtn = document.getElementById("cyBtn");
  const fiBtn = document.getElementById("fiBtn");
  const cyFilts = document.querySelector(".cy-filts");
  const fiFilts = document.querySelector(".fi-filts");
  const cryptTable = document.querySelector(".crypt-content");
  const fiatTable = document.querySelector(".fiat-content");

  cyBtn.addEventListener("click", (e) => {
    e.preventDefault();
    resetCyFyBtns();
    cyFilts.classList.add("active");
    cyBtn.classList.add("active");
    cryptTable.classList.add("active");
  });

  fiBtn.addEventListener("click", (e) => {
    e.preventDefault();
    resetCyFyBtns();
    fiFilts.classList.add("active");
    fiBtn.classList.add("active");
    fiatTable.classList.add("active");
  });

  const resetCyFyBtns = () => {
    cyFilts.classList.remove("active");
    cyBtn.classList.remove("active");
    fiFilts.classList.remove("active");
    fiBtn.classList.remove("active");
    cryptTable.classList.remove("active");
    fiatTable.classList.remove("active");
  };
  app.query("#fiTypeInt").value = "All";
  app.query("#fiDateInt").value = "Last 30 days";
  app.query("#cyTypeInt").value = "All";
  app.query("#cyDateInt").value = "Last 30 days";
};

//SETTING CRYPTO FILTERS
const settingCryptoFilters = () => {
  const cyType = document.querySelector(".cyType");
  const cyDate = document.querySelector(".cyDate");
  const cyAsset = document.querySelector(".cyAsset");
  const cyTypModal = document.querySelector(".cyTypModal");
  const cyDateModal = document.querySelector(".cyDateModal");
  const cyAssetModal = document.querySelector(".cyAssetModal");
  const cyDrpEch = document.querySelectorAll(".cyDrpEch");
  const cyTypeInt = document.getElementById("cyTypeInt");
  const drpTypEch = document.querySelectorAll(".drp-typ-ech");
  const cyDateEch = document.querySelectorAll(".cyDateEch");
  const cyDateInt = document.getElementById("cyDateInt");
  const assetEch = document.querySelectorAll(".assetEch");
  const drpCnn = document.querySelectorAll(".drp-cnn");
  const allAsset = document.querySelector(".allAsset");

  // CRYPTO TYPE
  cyType.addEventListener("click", () => {
    cyTypModal.classList.add("active");
  });

  cyDrpEch.forEach((cyDrpEch) => {
    cyDrpEch.addEventListener("click", () => {
      let text = cyDrpEch.children[0].textContent;
      cyTypeInt.value = text;

      console.log(cyTypeInt.value, cyDateInt.dataset.id, cyAsset.dataset.id);

      cyDrpEchRest();
      cyDrpEch.classList.add("active");
    });
  });

  // CRYPTO DURATION
  cyDate.addEventListener("click", () => {
    cyDateModal.classList.add("active");
  });

  cyDateEch.forEach((cyDateEch) => {
    cyDateEch.addEventListener("click", () => {
      let text = cyDateEch.children[0].textContent;
      cyDateInt.value = text;
      cyDateInt.dataset.id = cyDateEch.dataset.id;

      console.log(cyTypeInt.value, cyDateInt.dataset.id, cyAsset.dataset.id);

      cyDateEchRest();
      cyDateEch.classList.add("active");
    });
  });

  // CRYPTO ASSET
  cyAsset.addEventListener("click", () => {
    cyAssetModal.classList.add("active");
  });
  //COIN ASSET
  assetEch.forEach((assetEch) => {
    assetEch.addEventListener("click", () => {
      let imgSrc = assetEch.children[0].children[0].children[0].src;
      let imgDet = assetEch.children[0].children[1].children[0].textContent;

      cyAsset.dataset.id = assetEch.dataset.id;

      cyAsset.innerHTML = `<div class="asst-com">
        <div class="asst-com-img">
          <img src= ${imgSrc} alt="" />
        </div>
        <div class="asst-com-det">
          <h3>${imgDet}</h3>
        </div>
      </div>
      <i class="fa-solid fa-angle-down"></i>`;

      console.log(cyTypeInt.value, cyDateInt.dataset.id, cyAsset.dataset.id);

      cyAssetEchRest();
      assetEch.classList.add("active");
    });
  });
  //ALL ASSET
  allAsset.addEventListener("click", () => {
    cyAsset.dataset.id = allAsset.dataset.id;

    cyAsset.innerHTML = `<input type="input" id="cyAssetInt" value="All" />
        <i class="fa-solid fa-angle-down"></i>`;

    console.log(cyTypeInt.value, cyDateInt.dataset.id, cyAsset.dataset.id);

    cyAssetEchRest();
    allAsset.classList.add("active");
  });

  //All resets for filter buttons
  const cyDrpEchRest = () => {
    cyDrpEch.forEach((cyDrpEch) => {
      cyDrpEch.classList.remove("active");
    });
  };
  const cyDateEchRest = () => {
    cyDateEch.forEach((cyDateEch) => {
      cyDateEch.classList.remove("active");
    });
  };
  const cyAssetEchRest = () => {
    assetEch.forEach((assetEch) => {
      assetEch.classList.remove("active");
    });
    allAsset.classList.remove("active");
  };

  //Removing modal after click
  window.addEventListener("click", (e) => {
    if (!cyType.contains(e.target)) {
      cyTypModal.classList.remove("active");
    }
    if (!cyDate.contains(e.target)) {
      cyDateModal.classList.remove("active");
    }
    if (!cyAsset.contains(e.target)) {
      cyAssetModal.classList.remove("active");
    }
  });
};

//SETTING FIAT FILTERS
const settingFiatFilters = () => {
  const fiType = document.querySelector(".fiType");
  const fiDate = document.querySelector(".fiDate");
  const fiAsset = document.querySelector(".fiAsset");
  const fiTypModal = document.querySelector(".fiTypModal");
  const fiDateModal = document.querySelector(".fiDateModal");
  const fiAssetModal = document.querySelector(".fiAssetModal");
  const fiDrpEch = document.querySelectorAll(".fiDrpEch");
  const fiTypeInt = document.getElementById("fiTypeInt");
  const fiDateEch = document.querySelectorAll(".fiDateEch");
  const fiDateInt = document.getElementById("fiDateInt");
  const assetEchFiat = document.querySelectorAll(".assetEchFiat");
  const allFiat = document.querySelector(".allFiat");

  // FIAT TYPE
  fiType.addEventListener("click", () => {
    fiTypModal.classList.add("active");
  });

  fiDrpEch.forEach((fiDrpEch) => {
    fiDrpEch.addEventListener("click", () => {
      let text = fiDrpEch.children[0].textContent;
      fiTypeInt.value = text;

      const fetchFiatHistory = async () => {
        let fiatAsset = fiAsset.dataset.id === "all" ? "" : fiAsset.dataset.id;
        let fiatType = fiTypeInt.value === "all" ? "" : fiTypeInt.value;
        await getTransactionHistory(
          "fiat",
          fiatType,
          fiDateInt.dataset.id,
          fiatAsset
        );
      };
      fetchFiatHistory();

      console.log(fiTypeInt.value, fiDateInt.dataset.id, fiAsset.dataset.id);
      fiDrpEchRest();
      fiDrpEch.classList.add("active");
    });
  });

  // FIAT DURATION
  fiDate.addEventListener("click", () => {
    fiDateModal.classList.add("active");
  });

  fiDateEch.forEach((fiDateEch) => {
    fiDateEch.addEventListener("click", () => {
      let text = fiDateEch.children[0].textContent;
      fiDateInt.value = text;
      fiDateInt.dataset.id = fiDateEch.dataset.id;

      const fetchFiatHistory = async () => {
        let fiatAsset = fiAsset.dataset.id === "all" ? "" : fiAsset.dataset.id;
        let fiatType = fiTypeInt.value === "all" ? "" : fiTypeInt.value;
        await getTransactionHistory(
          "fiat",
          fiatType,
          fiDateInt.dataset.id,
          fiatAsset
        );
      };
      fetchFiatHistory();

      console.log(fiTypeInt.value, fiDateInt.dataset.id, fiAsset.dataset.id);
      fiDateEchRest();
      fiDateEch.classList.add("active");
    });
  });

  // FIAT ASSET
  fiAsset.addEventListener("click", () => {
    fiAssetModal.classList.add("active");
  });

  //CURRENCY ASSET
  assetEchFiat.forEach((assetEchFiat) => {
    assetEchFiat.addEventListener("click", () => {
      let imgSrc = assetEchFiat.children[0].children[0].children[0].src;
      let imgDet = assetEchFiat.children[0].children[1].children[0].textContent;

      fiAsset.dataset.id = assetEchFiat.dataset.id;
      fiAsset.innerHTML = `<div class="asst-com">
          <div class="asst-com-img">
            <img src= ${imgSrc} alt="" />
          </div>
          <div class="asst-com-det">
            <h3>${imgDet}</h3>
          </div>
        </div>
        <i class="fa-solid fa-angle-down"></i>`;

      const fetchFiatHistory = async () => {
        let fiatAsset = fiAsset.dataset.id === "all" ? "" : fiAsset.dataset.id;
        let fiatType = fiTypeInt.value === "all" ? "" : fiTypeInt.value;
        await getTransactionHistory(
          "fiat",
          fiatType,
          fiDateInt.dataset.id,
          fiatAsset
        );
      };
      fetchFiatHistory();

      console.log(fiTypeInt.value, fiDateInt.dataset.id, fiAsset.dataset.id);
      fiAssetEchRest();
      assetEchFiat.classList.add("active");
    });
  });
  //ALL ASSET
  allFiat.addEventListener("click", () => {
    fiAsset.dataset.id = allFiat.dataset.id;
    fiAsset.innerHTML = `<input type="input" id="fiAssetInt" value="All" />
                          <i class="fa-solid fa-angle-down"></i>`;

    const fetchFiatHistory = async () => {
      let fiatAsset = fiAsset.dataset.id === "all" ? "" : fiAsset.dataset.id;
      let fiatType = fiTypeInt.value === "all" ? "" : fiTypeInt.value;
      await getTransactionHistory(
        "fiat",
        fiatType,
        fiDateInt.dataset.id,
        fiatAsset
      );
    };
    fetchFiatHistory();

    console.log(fiTypeInt.value, fiDateInt.dataset.id, fiAsset.dataset.id);
    fiAssetEchRest();
    allFiat.classList.add("active");
  });

  //All resets for filter buttons
  const fiDrpEchRest = () => {
    fiDrpEch.forEach((fiDrpEch) => {
      fiDrpEch.classList.remove("active");
    });
  };
  const fiDateEchRest = () => {
    fiDateEch.forEach((fiDateEch) => {
      fiDateEch.classList.remove("active");
    });
  };
  const fiAssetEchRest = () => {
    assetEchFiat.forEach((assetEch) => {
      assetEch.classList.remove("active");
    });
    allFiat.classList.remove("active");
  };

  //Removing modal after click
  window.addEventListener("click", (e) => {
    if (!fiType.contains(e.target)) {
      fiTypModal.classList.remove("active");
    }
    if (!fiDate.contains(e.target)) {
      fiDateModal.classList.remove("active");
    }
    if (!fiAsset.contains(e.target)) {
      fiAssetModal.classList.remove("active");
    }
  });
};