import React from "react";

import Navbar4 from "../components/navbar4";
import Footer15 from "../components/footer15";
import "./home.css";
import "./data.css";

const Weatherforecast = (props) => {
  function getData() {
    const city = document.getElementById("city").value;
    const region = document.getElementById("region").value;
    const country = document.getElementById("country").value;
    const latitude = document.getElementById("latitude").value;
    const longitude = document.getElementById("longitude").value;
    const temperature = document.getElementById("temperature").checked;
    const isDay = document.getElementById("isDay").checked;
    const condition = document.getElementById("condition").checked;
    const pressure = document.getElementById("pressure").checked;
    const precipitation = document.getElementById("precipitation").checked;
    const humidity = document.getElementById("humidity").checked;
    const cloud = document.getElementById("cloud").checked;
    const feelslikeTemp = document.getElementById("feelslikeTemp").checked;
    const visibility = document.getElementById("visibility").checked;
    const uv = document.getElementById("uv").checked;
    const gust = document.getElementById("gust").checked;
    const airquality = boolToWord(
      document.getElementById("airquality").checked
    );
    const unitTemperature = document.getElementById("unitTemperature").value;
    const unitWindSpeed = document.getElementById("unitWindSpeed").value;
    const unitPressure = document.getElementById("unitPressure").value;
    const unitPrecipitation =
      document.getElementById("unitPrecipitation").value;
    const output = document.getElementById("output").value;
    const format = document.getElementById("format").value;

    const apiKey = "1244099aeaee4b179e6111803241304";
    const apiUrl = `https://api.weatherapi.com/v1/current.${format}?key=${apiKey}&q=${city}&aqi=${airquality}`;

    fetch(apiUrl)
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      })
      .then((data) => {
        // Wetterdaten anzeigen
        document.getElementById("weatherData").innerText = JSON.stringify(
          data,
          null,
          2
        );
        document.getElementById("apiUrloutput").value = apiUrl;
      })
      .catch((error) => {
        console.error("There was a problem with the fetch operation:", error);
      });
  }
  function searchAPI() {
    const cityInput = document.getElementById("city").value;

    const apiKey = "1244099aeaee4b179e6111803241304";
    const apiUrl = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q=${cityInput}`;

    fetch(apiUrl)
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }

        return response.json();
      })
      .then((data) => {
        // Wetterdaten anzeigen
        document.getElementById("weatherData").innerText = JSON.stringify(
          data,
          null,
          2
        );
      })
      .catch((error) => {
        console.error("There was a problem with the fetch operation:", error);
      });
  }

  function boolToWord(bool) {
    return bool ? "yes" : "no";
  }

  return (
    <div className="home-container">
      <div className="home-navbar1">
        <Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
      </div>

      <div>
        <div className="thq-grid-5">
          <div class="filter">
            <label for="city">City:</label>
            <input type="text" id="city" placeholder="City" />
            <br />
            <label for="city">Region:</label>
            <input type="text" id="region" placeholder="Region" />
            <br />
            <label>Country:</label>
            <input type="text" id="country" placeholder="Country" />
            <br />
            <label>Latitude:</label>
            <input type="text" id="latitude" placeholder="Latitude" />
            <label>Longitude:</label>
            <input type="text" id="longitude" placeholder="Longitude" />
            <br />
          </div>
          <div>
            <input
              type="checkbox"
              id="temperature"
              className="checkBoxFilter"
            />
            <label> Temprature</label>
            <br />
            <input type="checkbox" id="isDay" className="checkBoxFilter" />
            <label> Is it day?</label>
            <br />
            <input type="checkbox" id="condition" className="checkBoxFilter" />
            <label> Condition</label>
            <br />
            <input type="checkbox" id="pressure" className="checkBoxFilter" />
            <label> Pressure</label>
            <br />
            <input
              type="checkbox"
              id="precipitation"
              className="checkBoxFilter"
            />
            <label> Precipitation</label>
            <br />
            <input type="checkbox" id="humidity" className="checkBoxFilter" />
            <label> Humidity</label>
            <br />
            <input type="checkbox" id="cloud" className="checkBoxFilter" />
            <label> Cloud</label>
            <br />
            <input
              type="checkbox"
              id="feelslikeTemp"
              className="checkBoxFilter"
            />
            <label> Feelslike Temp.</label>
            <br />
            <input type="checkbox" id="visibility" className="checkBoxFilter" />
            <label> Visibility</label>
            <br />
            <input type="checkbox" id="uv" className="checkBoxFilter" />
            <label> UV-Index</label>
            <br />
            <input type="checkbox" id="gust" className="checkBoxFilter" />
            <label> Gust</label>
            <br />
            <input type="checkbox" id="airquality" className="checkBoxFilter" />
            <label> Airquality</label>
            <br />
          </div>
          <div class="filter">
            <label>Temperature Unit:</label>
            <select id="unitTemperature">
              <option value="temp_c">Celsius</option>
              <option value="temp_f">Fahrenheit</option>
            </select>
            <label>Wind speed Unit:</label>
            <select id="unitWindSpeed">
              <option value="wind_kph">km/h</option>
              <option value="wind_mph">Mph</option>
            </select>
            <label>Pressure Unit:</label>
            <select id="unitPressure">
              <option value="pressure_mb">Millibar</option>
              <option value="pressure_in">Inch</option>
            </select>
            <label>Precipitation Unit:</label>
            <select id="unitPrecipitation">
              <option value="precip_mm">Millimeter</option>
              <option value="precip_in">Inch</option>
            </select>
          </div>

          <div class="filter">
            <label>Output:</label>
            <select id="output">
              <option value="local">Local</option>
              <option value="database">API</option>
            </select>
            <br />
            <label>Data format:</label>
            <select id="format">
              <option value="json">JSON</option>
              <option value="csv">CSV</option>
              <option value="xml">XML</option>
            </select>
            <br />
            <button className="APIButton" onClick={searchAPI}>City api</button>
          </div>
        </div>
        <div>
          <button className="thq-button-filled" onClick={getData}>
            Generate
          </button>
        </div>

        <div class="output">
          <h2>Output:</h2>
          <br />
          <pre id="weatherData"></pre>
        </div>
      </div>
      <div id="apiUrl">
        <label>API URL:</label>
        <br />
        <input className="input" type="text" id="apiUrloutput" readOnly />
      </div>

      <div className="home-footer11">
        <Footer15></Footer15>
      </div>
    </div>
  );
};

export default Weatherforecast;