const wrapper = document.querySelector(".wrapper"),
  inputPart = document.querySelector(".input-part"),
  infoTxt = inputPart.querySelector(".info-txt"),
  inputField = inputPart.querySelector("input"),
  locationBtn = inputPart.querySelector("button"),
  weatherPart = wrapper.querySelector(".weather-part"),
  wIcon = weatherPart.querySelector("img"),
  arrowBack = wrapper.querySelector("header i");

const apiKey = "https://api.collectapi.com/weather/getWeather?data.lang=tr&data.city=ankara"; // Replace with your actual API key
let api;

inputField.addEventListener("keyup", (e) => {
  if (e.key == "Enter" && inputField.value != "") {
    requestApi(inputField.value);
  }
});

locationBtn.addEventListener("click", () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
  } else {
    alert("Your browser not support geolocation api");
  }
});

function requestApi(city) {
  api = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`;
  fetchData();
}

function onSuccess(position) {
  const { latitude, longitude } = position.coords;
  api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${apiKey}`;
  fetchData();
}

function onError(error) {
  infoTxt.innerText = error.message;
  infoTxt.classList.add("error");
}

function fetchData() {
  infoTxt.innerText = "Getting weather details...";
  infoTxt.classList.add("pending");
  fetch(api)
    .then((res) => res.json())
    .then((result) => weatherDetails(result))
    .catch(() => {
      infoTxt.innerText = "Something went wrong, API Error";
      infoTxt.classList.replace("pending", "error");
    });
}

function weatherDetails(info) {
  if (info.cod == "404") {
    infoTxt.classList.replace("pending", "error");
    infoTxt.innerText = `${inputField.value} isn't a valid city name`;
  } else {
    const city = info.name;
    const country = info.sys.country;
    const { description, id } = info.weather[0];
    const { temp, feels_like, humidity } = info.main;

    if (id == 800) {
      wIcon.src =
        "https://drive.google.com/uc?export=view&id=13TlzPFrICsSEB3llo6PWuywWpoL6ywxb";
    } else if (id >= 200 && id <= 232) {
      wIcon.src =
        "https://drive.google.com/uc?export=view&id=13eqt-OgtVphxXYpIHd9Q7QOBNocK0Onq";
    } else if (id >= 600 && id <= 622) {
      wIcon.src =
        "https://drive.google.com/uc?export=view&id=13Z9FbAC1FJ-ptr55vUWUufLBCrhgjbF1";
    } else if (id >= 701 && id <= 781) {
      wIcon.src =
        "https://drive.google.com/uc?export=view&id=13YVPMlryJ3168jk-VR_zfTvVBL6Xeaqs";
    } else if (id >= 801 && id <= 804) {
      wIcon.src =
        "https://drive.google.com/uc?export=view&id=13TVP9iuZz8A9cf3OtJCgTmeS9AtJ-B3R";
    } else if ((id >= 500 && id <= 531) || (id >= 300 && id <= 321)) {
      wIcon.src =
        "https://drive.google.com/uc?export=view&id=13YoLrgIqfw6UHTu0x4yqTRLIyCbT1O6e";
    }

    weatherPart.querySelector(".temp .numb").innerText = Math.floor(temp);
    weatherPart.querySelector(".weather").innerText = description;
    weatherPart.querySelector(
      ".location span"
    ).innerText = `${city}, ${country}`;
    weatherPart.querySelector(".temp .numb-2").innerText = Math.floor(
      feels_like
    );
    weatherPart.querySelector(".humidity span").innerText = `${humidity}%`;
    infoTxt.classList.remove("pending", "error");
    infoTxt.innerText = "";
    inputField.value = "";
    wrapper.classList.add("active");
  }
}

arrowBack.addEventListener("click", () => {
  wrapper.classList.remove("active");
});

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(180deg, #0f0f0f 50%, #a12a59 50%);
  color: #fff;
}

::selection {
  color: #141414;
  background: #fff;
}

.wrapper {
  width: 400px;
  background: #1f1f1f;
  border-radius: 7px;
  border: 1px solid #fff;
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}

.wrapper header {
  display: flex;
  font-size: 21px;
  font-weight: 500;
  color: #dbc025;
  padding: 16px 15px;
  align-items: center;
  border-bottom: 1px solid #333;
}

header i {
  font-size: 0em;
  cursor: pointer;

  margin-right: 8px;
}

.wrapper.active header i {
  margin-left: 5px;
  font-size: 30px;
}

.wrapper .input-part {
  margin: 20px 25px 30px;
}

.wrapper.active .input-part {
  display: none;
}

.input-part .info-txt {
  display: none;
  font-size: 17px;
  text-align: center;
  padding: 12px 10px;
  border-radius: 7px;
  margin-bottom: 15px;
}

.input-part .info-txt.error {
  color: #ff5252;
  display: block;
  background: #1f1f1f;
  border: 1px solid #ff5252;
}

.input-part .info-txt.pending {
  color: #5362b8;
  display: block;
  background: #1f1f1f;
  border: 1px solid #5362b8;
}

.input-part :where(input, button) {
  width: 100%;
  height: 55px;
  border: none;
  outline: none;
  font-size: 18px;
  border-radius: 7px;
}

.input-part input {
  text-align: center;
  padding: 0 15px;
  border: 1px solid #333;
}

.input-part input:is(:focus, :valid) {
  border: 2px solid #dbc025;
}

.input-part input::placeholder {
  color: #666;
}

.input-part .separator {
  height: 1px;
  width: 100%;
  margin: 25px 0;
  background: #333;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.separator::before {
  content: "or";
  color: #666;
  font-size: 19px;
  padding: 0 15px;
  background: #1f1f1f;
}

.input-part button {
  color: #fff;
  cursor: pointer;
  background: #5362b8;
  transition: 0.3s ease;
}

.input-part button:hover {
  background: #525d9c;
}

.wrapper .weather-part {
  display: none;
  margin: 30px 0 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.wrapper.active .weather-part {
  display: flex;
}

.weather-part img {
  max-width: 125px;
}

.weather-part .temp {
  display: flex;
  font-weight: 500;
  font-size: 72px;
}

.weather-part .temp .numb {
  font-weight: 600;
}

.weather-part .temp .deg {
  font-size: 40px;
  display: block;
  margin: 10px 5px 0 0;
}

.weather-part .weather {
  font-size: 21px;
  text-align: center;
  margin: -5px 20px 15px;
}

.weather-part .location {
  display: flex;
  font-size: 19px;
  padding: 0 20px;
  text-align: center;
  margin-bottom: 30px;
  align-items: flex-start;
}

.location i {
  font-size: 22px;
  margin: 4px 5px 0 0;
}

.weather-part .bottom-details {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-top: 1px solid #333;
}

.bottom-details .column {
  display: flex;
  width: 100%;
  padding: 15px 0;
  align-items: center;
  justify-content: center;
}

.column i {
  color: #43affc;
  font-size: 40px;
}

.column.humidity {
  border-left: 1px solid #333;
}

.column .details {
  margin-left: 3px;
}

.details .temp,
.humidity span {
  font-size: 18px;
  font-weight: 500;
  margin-top: -3px;
}

.details .temp .deg {
  margin: 0;
  font-size: 17px;
  padding: 0 2px 0 1px;
}

.column .details p {
  font-size: 14px;
  margin-top: -6px;
}

.humidity i {
  font-size: 37px;
}