// Cloned by Dzastina Laukaityte on 30 Nov 2023 from World "Chat with GPT model" by Starter user 
// Please leave this clone trail here.
 
const axiosScript = document.createElement('script');
axiosScript.src = 'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js';
document.head.appendChild(axiosScript);

document.write(`
  <style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
  }

  #weatherContainer {
    display: flex;
    justify-content: space-around;
    width: 80%;
  }

  .weather-card,
  .weather-card1 {
    width: 80%;
    background-color: white;
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .weather-card1 {
    background-color: lightblue;
  }

  h1 {
    text-align: center;
    color: #333;
  }

  #weatherForm {
    background-color: white;
    padding: 20px;
    margin: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 25%;
  }

  #compareWeather,
  #fetchWeather {
    background-color: #328fa8; /* Blue background */
    color: white; /* White text */
    padding: 10px 20px; /* Add padding to the button */
    font-size: 16px; /* Increase font size */
    border: none; /* Remove border */
    border-radius: 5px; /* Add border radius for rounded corners */
    cursor: pointer; /* Add a pointer cursor on hover */
    margin-top: 10px; /* Add some top margin to separate buttons */
  }

  #compareWeather:hover,
  #fetchWeather:hover {
    background-color: #3283a8;
  }
</style>


  <h1>Weather Information</h1>
  <div id="weatherForm">
    <form id="form">
      <label for="apiKey"><b>Enter API key:</b></label>
      <input type="text" id="apiKey" name="apiKey" required><br><br>
      
      <label for="locationName"><b>Enter A City:</b></label>
      <input type="text" id="locationName" name="locationName" required><br><br>
      

      
      <div id="locationTwoInput" style="display: none;">
        <label for="locationTwo"><b>Enter Another City:</b></label>
        <input type="text" id="locationTwo" name="locationTwo"><br><br>
      </div>
      
            <input type="submit" value="Fetch Weather" id="fetchWeather">
      <button id="compareWeather">Compare Weather</button>
    </form>
  </div>

  <div id="weatherContainer"></div>
`);

// Function to fetch weather data for a single location
    async function fetchWeather(apiKey, locationName, locationNumber) {
      const headers = {
        'X-RapidAPI-Key': apiKey,
        'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com'
      };

      try {
        const response = await axios.get('https://weatherapi-com.p.rapidapi.com/current.json', {
          params: { q: locationName },
          headers: headers
        });

        const weatherData = extractWeatherInfo(response.data);
        displayWeatherData(weatherData, locationNumber);

        // Show the "Compare Weather" button after displaying weather for the first location
        document.getElementById('compareWeather').style.display = 'block';
      } catch (error) {
        console.error(error);
        alert('Failed to fetch weather information. Please check your API key or location.');
      }
    }

    // Function to fetch astronomy data for a single location
    async function fetchAstronomy(apiKey, locationName, locationNumber) {
      const headers = {
        'X-RapidAPI-Key': apiKey,
        'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com'
      };

      try {
        const response = await axios.get('https://weatherapi-com.p.rapidapi.com/astronomy.json', {
          params: { q: locationName },
          headers: headers
        });

        const astronomyData = extractAstronomyInfo(response.data);
        displayAstronomyData(astronomyData, locationNumber);
      } catch (error) {
        console.error(error);
        alert('Failed to fetch astronomy information. Please check your API key or location.');
      }
    }

    document.getElementById('form').addEventListener('submit', function(event) {
      event.preventDefault();

      const apiKey = document.getElementById('apiKey').value;
      const locationName = document.getElementById('locationName').value;

      fetchWeather(apiKey, locationName, 1); // For the first location
      fetchAstronomy(apiKey, locationName, 1); // For the first location
    });

    document.getElementById('compareWeather').addEventListener('click', function(event) {
  event.preventDefault();

  // Hide the "Compare Weather" button after clicking
  this.style.visibility = 'hidden';

  // Show the input for the second location
  document.getElementById('locationTwoInput').style.display = 'block';

  // Show the button for fetching weather based on the second location
  document.getElementById('fetchWeather').addEventListener('click', function(event) {
    event.preventDefault();
    const apiKey = document.getElementById('apiKey').value;
    const locationTwo = document.getElementById('locationTwo').value;
    fetchWeather(apiKey, locationTwo, 2); // For the second location
    fetchAstronomy(apiKey, locationTwo, 2); // For the second location

    // Hide both buttons after clicking "Fetch Weather"
    document.getElementById('compareWeather').style.visibility = 'hidden';
    document.getElementById('fetchWeather').style.display = 'none';
  });
});


    function extractWeatherInfo(data) {
      return {
        name: data.location.name,
        country: data.location.country,
        temp_c: data.current.temp_c,
        temp_f: data.current.temp_f,
        wind_mph: data.current.wind_mph,
        wind_dir: data.current.wind_dir,
        cloud: data.current.cloud,
        feelslike_c: data.current.feelslike_c,
        icon: `https:${data.current.condition.icon}`,
      };
    }

    function displayWeatherData(weatherData, locationNumber) {
  const weatherContainer = document.getElementById('weatherContainer');
  let locationDiv = document.getElementById(`location${locationNumber}`);

  if (!locationDiv) {
    locationDiv = document.createElement('div');
    locationDiv.id = `location${locationNumber}`;
    locationDiv.classList.add('location-div');
    weatherContainer.appendChild(locationDiv);
  } else {
    // Clear previous content if needed
    locationDiv.innerHTML = '';
  }

  const locationContainer = document.createElement('div');
  locationContainer.classList.add('location-container');
  locationDiv.appendChild(locationContainer);

  const weatherCard = document.createElement('div');
  const uniqueWeatherCardId = `weatherCard${locationNumber}`;
  weatherCard.classList.add('weather-card');
  weatherCard.id = uniqueWeatherCardId;
  locationContainer.appendChild(weatherCard);

      weatherCard.innerHTML = `
        <h3>${weatherData.name}, ${weatherData.country}</h3>
        <img src="${weatherData.icon}" alt="Weather Icon">
        <p><b>Temperature:</b> ${weatherData.temp_c}°C / ${weatherData.temp_f}°F</p>
        <p><b>Wind:</b> ${weatherData.wind_mph} mph, ${weatherData.wind_dir}</p>
        <p><b>Cloudiness:</b> ${weatherData.cloud}</p>
        <p><b>Feels Like:</b> ${weatherData.feelslike_c}°C</p>
      `;
    }

    function extractAstronomyInfo(data) {
      return {
        sunrise: data.astronomy.astro.sunrise,
        sunset: data.astronomy.astro.sunset,
        moonrise: data.astronomy.astro.moonrise,
        moonset: data.astronomy.astro.moonset,
        moon_phase: data.astronomy.astro.moon_phase,
        moon_illumination: data.astronomy.astro.moon_illumination
      };
    }

  function displayAstronomyData(astronomyData, locationNumber) {
  const weatherContainer = document.getElementById('weatherContainer');
  let locationDiv = document.getElementById(`location${locationNumber}`);

  if (!locationDiv) {
    locationDiv = document.createElement('div');
    locationDiv.id = `location${locationNumber}`;
    locationDiv.classList.add('location-div');
    weatherContainer.appendChild(locationDiv);
  }

  let locationContainer = document.getElementById(`locationContainer${locationNumber}`);

  if (!locationContainer) {
    locationContainer = document.createElement('div');
    locationContainer.id = `locationContainer${locationNumber}`;
    locationContainer.classList.add('location-container');
    locationDiv.appendChild(locationContainer);
  }

  let astronomyCard = document.getElementById(`astronomyCard${locationNumber}`);

  if (!astronomyCard) {
    astronomyCard = document.createElement('div');
    astronomyCard.id = `astronomyCard${locationNumber}`;
    astronomyCard.classList.add('weather-card1');
    locationContainer.appendChild(astronomyCard);
  } else {
    // Clear previous content if needed
    astronomyCard.innerHTML = '';
  }

  astronomyCard.innerHTML = `
    <h3>Astronomy Information</h3>
    <p><b>Sunrise:</b> ${astronomyData.sunrise}</p>
    <p><b>Sunset:</b> ${astronomyData.sunset}</p>
    <p><b>Moonrise:</b> ${astronomyData.moonrise}</p>
    <p><b>Moonset:</b> ${astronomyData.moonset}</p>
    <p><b>Moon Phase:</b> ${astronomyData.moon_phase}</p>
    <p><b>Moon Illumination:</b> ${astronomyData.moon_illumination}</p>
  `;
}

document.head.appendChild(document.createElement('style')).textContent = `
  .location-container {
    display: flex;
    flex-direction: row;
  }
  .weather-card,
  .weather-card1 {
    flex: 1;
    margin: 5px; /* Add margin for spacing between cards */
  }
`;