import React from "react";

import "./weatherForecastData.css";

const WeatherForecastData = (props) => {
    return (
        <div className="home-container">
          <div>
            <div className="thq-grid-5">
              <div class="filter">
                 <div>
                 <label for="location">Location:</label>
                    <input type="text" id="city_text" placeholder="Location" />
                    <br />
                    <label for="region">Region:</label>
                    <input type="text" id="region_text" placeholder="Region" />
                    <br />
                    <label>Country:</label>
                    <input type="text" id="country_text" placeholder="Country" />
                    <br />
                    <label>Latitude:</label>
                    <input type="text" id="latitude_text" placeholder="Latitude" />
                    <label>Longitude:</label>
                    <input type="text" id="longitude_text" placeholder="Longitude" />
                    <br />
                  </div>
                  <div>
                    <input type="checkbox" id="name" className="checkBoxFilter" />
                    <label> City Name</label>
                    <br />
                    <input type="checkbox" id="region" className="checkBoxFilter" />
                    <label> Region</label>
                    <br />
                    <input type="checkbox" id="country" className="checkBoxFilter" />
                    <label> Country</label>
                    <br />
                    <input type="checkbox" id="lon" className="checkBoxFilter" />
                    <label> Longitude</label>
                    <br />
                    <input type="checkbox" id="lat" className="checkBoxFilter" />
                    <label> Latitude</label>
                    <br />
                    <input type="checkbox" id="tz_id" className="checkBoxFilter" />
                    <label> Timezone Id</label>
                    <br />
                    <input
                      type="checkbox"
                      id="localtime_epoch"
                      className="checkBoxFilter"
                    />
                    <label> Localtime Epoch</label>
                    <br />
                    <input type="checkbox" id="localtime" className="checkBoxFilter" />
                    <label> Localtime</label>
                    <br />
                    <input
                      type="checkbox"
                      id="last_updated_epoch"
                      className="checkBoxFilter"
                    />
                    <label> Last Updated Epoch</label>
                    <br />
                    <input
                      type="checkbox"
                      id="last_updated"
                      className="checkBoxFilter"
                    />
                    <label> Last Updated</label>
                    <br />
                    <input type="checkbox" id="date" class="checkBoxFilter" />
                    <label for="date">Date</label>
                    <br />
                    <input type="checkbox" id="date_epoch" class="checkBoxFilter" />
                    <label for="date_epoch">Date Epoch</label>
                    <br />
                    <input type="checkbox" id="maxtemp" class="checkBoxFilter" />
                    <label for="maxtemp">Max Temperature</label>
                    <br />
                    <input type="checkbox" id="mintemp" class="checkBoxFilter" />
                    <label for="mintemp">Min Temperature</label>
                    <br />
                    <input type="checkbox" id="avgtemp" class="checkBoxFilter" />
                    <label for="avgtemp">Average Temperature</label>
                    <br />
                    <input type="checkbox" id="maxwind" class="checkBoxFilter" />
                    <label for="maxwind">Max Wind Speed</label>
                    <br />
                    <input type="checkbox" id="totalprecip" class="checkBoxFilter" />
                    <label for="totalprecip">Total Precipitation</label>
                    <br />
                    <input type="checkbox" id="avgvis" class="checkBoxFilter" />
                    <label for="avgvis">Average Visibility</label>
                    <br />
                    <input type="checkbox" id="avghumidity" class="checkBoxFilter" />
                    <label for="avghumidity">Average Humidity</label>
                    <br />
                    <input type="checkbox" id="daily_will_it_rain" class="checkBoxFilter" />
                    <label for="daily_will_it_rain">Daily Will it Rain</label>
                    <br />
                    <input type="checkbox" id="daily_chance_of_rain" class="checkBoxFilter" />
                    <label for="daily_chance_of_rain">Daily Chance of Rain</label>
                    <br />
                    <input type="checkbox" id="daily_will_it_snow" class="checkBoxFilter" />
                    <label for="daily_will_it_snow">Daily Will it Snow</label>
                    <br />
                    <input type="checkbox" id="daily_chance_of_snow" class="checkBoxFilter" />
                    <label for="daily_chance_of_snow">Daily Chance of Snow</label>
                    <br />
                    <input type="checkbox" id="condition_text" class="checkBoxFilter" />
                    <label for="condition_text">Condition Text</label>
                    <br />
                    <input type="checkbox" id="condition_icon" class="checkBoxFilter" />
                    <label for="condition_icon">Condition Icon</label>
                    <br />
                    <input type="checkbox" id="condition_code" class="checkBoxFilter" />
                    <label for="condition_code">Condition Code</label>
                    <br />
                    <input type="checkbox" id="uv" class="checkBoxFilter" />
                    <label for="uv">UV Index</label>
                    <br />
                    <input type="checkbox" id="sunrise" class="checkBoxFilter" />
                    <label for="sunrise">Sunrise</label>
                    <br />
                    <input type="checkbox" id="sunset" class="checkBoxFilter" />
                    <label for="sunset">Sunset</label>
                    <br />
                    <input type="checkbox" id="moonrise" class="checkBoxFilter" />
                    <label for="moonrise">Moonrise</label>
                    <br />
                    <input type="checkbox" id="moonset" class="checkBoxFilter" />
                    <label for="moonset">Moonset</label>
                    <br />
                    <input type="checkbox" id="moon_phase" class="checkBoxFilter" />
                    <label for="moon_phase">Moon Phase</label>
                    <br />
                    <input type="checkbox" id="moon_illumination" class="checkBoxFilter" />
                    <label for="moon_illumination">Moon Illumination</label>
                    <br />
                    <input type="checkbox" id="hour_time_epoch" class="checkBoxFilter" />
                    <label for="hour_time_epoch">Hour Time Epoch</label>
                    <br />
                    <input type="checkbox" id="hour_time" class="checkBoxFilter" />
                    <label for="hour_time">Hour Time</label>
                    <br />
                    <input type="checkbox" id="hour_temp" class="checkBoxFilter" />
                    <label for="hour_temp">Hour Temperature</label>
                    <br />
                    <input type="checkbox" id="hour_is_day" class="checkBoxFilter" />
                    <label for="hour_is_day">Hour Is Day</label>
                    <br />
                    <input type="checkbox" id="hour_condition_text" class="checkBoxFilter" />
                    <label for="hour_condition_text">Hour Condition Text</label>
                    <br />
                    <input type="checkbox" id="hour_condition_icon" class="checkBoxFilter" />
                    <label for="hour_condition_icon">Hour Condition Icon</label>
                    <br />
                    <input type="checkbox" id="hour_condition_code" class="checkBoxFilter" />
                    <label for="hour_condition_code">Hour Condition Code</label>
                    <br />
                    <input type="checkbox" id="hour_wind" class="checkBoxFilter" />
                    <label for="hour_wind">Hour Wind</label>
                    <br />
                    <input type="checkbox" id="hour_wind_degree" class="checkBoxFilter" />
                    <label for="hour_wind_degree">Hour Wind Degree</label>
                    <br />
                    <input type="checkbox" id="hour_wind_dir" class="checkBoxFilter" />
                    <label for="hour_wind_dir">Hour Wind Direction</label>
                    <br />
                    <input type="checkbox" id="hour_pressure" class="checkBoxFilter" />
                    <label for="hour_pressure">Hour Pressure</label>
                    <br />
                    <input type="checkbox" id="hour_precip" class="checkBoxFilter" />
                    <label for="hour_precip">Hour Precipitation</label>
                    <br />
                    <input type="checkbox" id="hour_humidity" class="checkBoxFilter" />
                    <label for="hour_humidity">Hour Humidity</label>
                    <br />
                    <input type="checkbox" id="hour_cloud" class="checkBoxFilter" />
                    <label for="hour_cloud">Hour Cloud</label>
                    <br />
                    <input type="checkbox" id="hour_feelslike" class="checkBoxFilter" />
                    <label for="hour_feelslike">Hour Feels Like</label>
                    <br />
                    <input type="checkbox" id="hour_windchill" class="checkBoxFilter" />
                    <label for="hour_windchill">Hour Wind Chill</label>
                    <br />
                    <input type="checkbox" id="hour_heatindex" class="checkBoxFilter" />
                    <label for="hour_heatindex">Hour Heat Index</label>
                    <br />
                    <input type="checkbox" id="hour_dewpoint" class="checkBoxFilter" />
                    <label for="hour_dewpoint">Hour Dew Point</label>
                    <br />
                    <input type="checkbox" id="hour_vis" class="checkBoxFilter" />
                    <label for="hour_vis">Hour Visibility</label>
                    <br />
                    <input type="checkbox" id="hour_gust" class="checkBoxFilter" />
                    <label for="hour_gust">Hour Gust</label>
                    <br />
                    <input type="checkbox" id="hour_uv" class="checkBoxFilter" />
                    <label for="hour_uv">Hour UV</label>
                    <br />
                <br />
                <div>
              <button className="thq-button-filled" onClick={getData}>
                Generate
              </button>
            </div>
            <br />
            <div class="output">
              <h2>Output:</h2>
              <br />
              <pre id="weatherData"></pre>
            </div>
            <div id="apiUrl">
              <label>API URL:</label>
              <br />
              <input className="input" type="text" id="apiUrloutput" readOnly />
            </div>
            <button className="APIButton" onClick={searchAPI}>
              City api
            </button>
            <br />
            <br />
          </div>
        </div>
      </div>
    </div>
    </div>
      );

    function getData() {
      const city = document.getElementById("city_text").value;
      const region = document.getElementById("region_text").value;
      const country = document.getElementById("country_text").value;
      const latitude = document.getElementById("latitude_text").value;
      const longitude = document.getElementById("longitude_text").value;
      
      const name = document.getElementById("name").checked;
      const regionCheckbox = document.getElementById("region").checked;
      const countryCheckbox = document.getElementById("country").checked;
      const lon = document.getElementById("lon").checked;
      const lat = document.getElementById("lat").checked;
      const tz_id = document.getElementById("tz_id").checked;
      const localtime_epoch = document.getElementById("localtime_epoch").checked;
      const localtime = document.getElementById("localtime").checked;
      const last_updated_epoch = document.getElementById("last_updated_epoch").checked;
      const last_updated = document.getElementById("last_updated").checked;
      const date = document.getElementById("date").checked;
      const date_epoch = document.getElementById("date_epoch").checked;
      const maxtemp = document.getElementById("maxtemp").checked;
      const mintemp = document.getElementById("mintemp").checked;
      const avgtemp = document.getElementById("avgtemp").checked;
      const maxwind = document.getElementById("maxwind").checked;
      const totalprecip = document.getElementById("totalprecip").checked;
      const avgvis = document.getElementById("avgvis").checked;
      const avghumidity = document.getElementById("avghumidity").checked;
      const daily_will_it_rain = document.getElementById("daily_will_it_rain").checked;
      const daily_chance_of_rain = document.getElementById("daily_chance_of_rain").checked;
      const daily_will_it_snow = document.getElementById("daily_will_it_snow").checked;
      const daily_chance_of_snow = document.getElementById("daily_chance_of_snow").checked;
      const condition_text = document.getElementById("condition_text").checked;
      const condition_icon = document.getElementById("condition_icon").checked;
      const condition_code = document.getElementById("condition_code").checked;
      const uv = document.getElementById("uv").checked;
      const sunrise = document.getElementById("sunrise").checked;
      const sunset = document.getElementById("sunset").checked;
      const moonrise = document.getElementById("moonrise").checked;
      const moonset = document.getElementById("moonset").checked;
      const moon_phase = document.getElementById("moon_phase").checked;
      const moon_illumination = document.getElementById("moon_illumination").checked;
      const hour_time_epoch = document.getElementById("hour_time_epoch").checked;
      const hour_time = document.getElementById("hour_time").checked;
      const hour_temp = document.getElementById("hour_temp").checked;
      const hour_is_day = document.getElementById("hour_is_day").checked;
      const hour_condition_text = document.getElementById("hour_condition_text").checked;
      const hour_condition_icon = document.getElementById("hour_condition_icon").checked;
      const hour_condition_code = document.getElementById("hour_condition_code").checked;
      const hour_wind = document.getElementById("hour_wind").checked;
      const hour_wind_degree = document.getElementById("hour_wind_degree").checked;
      const hour_wind_dir = document.getElementById("hour_wind_dir").checked;
      const hour_pressure = document.getElementById("hour_pressure").checked;
      const hour_precip = document.getElementById("hour_precip").checked;
      const hour_humidity = document.getElementById("hour_humidity").checked;
      const hour_cloud = document.getElementById("hour_cloud").checked;
      const hour_feelslike = document.getElementById("hour_feelslike").checked;
      const hour_windchill = document.getElementById("hour_windchill").checked;
      const hour_heatindex = document.getElementById("hour_heatindex").checked;
      const hour_dewpoint = document.getElementById("hour_dewpoint").checked;
      const hour_vis = document.getElementById("hour_vis").checked;
      const hour_gust = document.getElementById("hour_gust").checked;
      const hour_uv = document.getElementById("hour_uv").checked;
      
      let filterArray = [];
      
      if (name) filterArray.push("name");
      if (regionCheckbox) filterArray.push("region");
      if (countryCheckbox) filterArray.push("country");
      if (lon) filterArray.push("lon");
      if (lat) filterArray.push("lat");
      if (tz_id) filterArray.push("tz_id");
      if (localtime_epoch) filterArray.push("localtime_epoch");
      if (localtime) filterArray.push("localtime");
      if (last_updated_epoch) filterArray.push("last_updated_epoch");
      if (last_updated) filterArray.push("last_updated");
      if (date) filterArray.push("date");
      if (date_epoch) filterArray.push("date_epoch");
      if (maxtemp) filterArray.push("maxtemp");
      if (mintemp) filterArray.push("mintemp");
      if (avgtemp) filterArray.push("avgtemp");
      if (maxwind) filterArray.push("maxwind");
      if (totalprecip) filterArray.push("totalprecip");
      if (avgvis) filterArray.push("avgvis");
      if (avghumidity) filterArray.push("avghumidity");
      if (daily_will_it_rain) filterArray.push("daily_will_it_rain");
      if (daily_chance_of_rain) filterArray.push("daily_chance_of_rain");
      if (daily_will_it_snow) filterArray.push("daily_will_it_snow");
      if (daily_chance_of_snow) filterArray.push("daily_chance_of_snow");
      if (condition_text) filterArray.push("condition_text");
      if (condition_icon) filterArray.push("condition_icon");
      if (condition_code) filterArray.push("condition_code");
      if (uv) filterArray.push("uv");
      if (sunrise) filterArray.push("sunrise");
      if (sunset) filterArray.push("sunset");
      if (moonrise) filterArray.push("moonrise");
      if (moonset) filterArray.push("moonset");
      if (moon_phase) filterArray.push("moon_phase");
      if (moon_illumination) filterArray.push("moon_illumination");
      if (hour_time_epoch) filterArray.push("hour_time_epoch");
      if (hour_time) filterArray.push("hour_time");
      if (hour_temp) filterArray.push("hour_temp");
      if (hour_is_day) filterArray.push("hour_is_day");
      if (hour_condition_text) filterArray.push("hour_condition_text");
      if (hour_condition_icon) filterArray.push("hour_condition_icon");
      if (hour_condition_code) filterArray.push("hour_condition_code");
      if (hour_wind) filterArray.push("hour_wind");
      if (hour_wind_degree) filterArray.push("hour_wind_degree");
      if (hour_wind_dir) filterArray.push("hour_wind_dir");
      if (hour_pressure) filterArray.push("hour_pressure");
      if (hour_precip) filterArray.push("hour_precip");
      if (hour_humidity) filterArray.push("hour_humidity");
      if (hour_cloud) filterArray.push("hour_cloud");
      if (hour_feelslike) filterArray.push("hour_feelslike");
      if (hour_windchill) filterArray.push("hour_windchill");
      if (hour_heatindex) filterArray.push("hour_heatindex");
      if (hour_dewpoint) filterArray.push("hour_dewpoint");
      if (hour_vis) filterArray.push("hour_vis");
      if (hour_gust) filterArray.push("hour_gust");
      if (hour_uv) filterArray.push("hour_uv");
      
      let filterString = filterArray.join(",");

      console.log("FilterString = " + filterString);
  
      const apiUrl = `http://localhost:8080/currentweather?q=${city_text}&filter=${filterString}`;
  
    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";
  }

};

export default WeatherForecastData;