const apiKey = '798c86aa4939906b096b1a604d8b3e45';
const city = 'Toronto';

// API URL
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

// div for styling
const container = document.createElement('div');
container.style.fontFamily = 'Arial, sans-serif';
container.style.textAlign = 'center';
container.style.marginTop = '50px';

// div for the white border box
const whiteBox = document.createElement('div');
whiteBox.style.backgroundColor = '#fff';  // White background color
whiteBox.style.borderRadius = '10px';  // Rounded corners
whiteBox.style.padding = '20px';  // Padding inside the box
whiteBox.style.width = '300px';  // Set the width to 60% of the container
whiteBox.style.margin = '0 auto';  // Center the box horizontally

const paragraph = document.createElement('p');
paragraph.id = 'weather-info';
paragraph.innerHTML = `The weather in ${city} is as follows: <br>Loading...`;
paragraph.style.fontSize = '18px';

whiteBox.appendChild(paragraph);

container.appendChild(whiteBox);

document.body.appendChild(container);

// Function to set background image based on weather description
function setBackgroundImage(description) {
    // Default background image
    let backgroundImageUrl = '/uploads/coynetn2/default.png';  
    // Map weather conditions to background image URLs
    const backgroundImageMap = {
        'rain': '/uploads/coynetn2/rain.jpeg',
        'snow': '/uploads/coynetn2/snow.jpg',
        'cloud': '/uploads/coynetn2/cloudy.jpg',
        'fog': '/uploads/coynetn2/fog.jpeg',
    };

    // Check if the description contains any condition in the map
    for (const condition in backgroundImageMap) {
        if (description.toLowerCase().includes(condition)) {
            backgroundImageUrl = backgroundImageMap[condition];
            break;
        }
    }

    console.log('Background Image URL:', backgroundImageUrl);

    // Set the background image
    document.body.style.backgroundImage = `url(${backgroundImageUrl})`;
    document.body.style.backgroundSize = 'cover';
    document.body.style.backgroundRepeat = 'no-repeat';
}


fetch(apiUrl)
    .then(response => {
        console.log('Fetch response:', response);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('API Data:', data);

        // Extract temperature, description, humidity, wind speed, and pressure
        const temperature = data.main.temp;
        const tempCel = temperature - 273.15 //convert from kelvin
        const description = data.weather[0].description;
        const humidity = data.main.humidity;
        const windSpeed = data.wind.speed;
        const pressure = data.main.pressure;

        
        paragraph.innerHTML = `The weather in ${city} is as follows: 
            <br>Temperature: ${tempCel.toFixed(2)}°C, 
            <br>Description: ${description}, 
            <br>Humidity: ${humidity}%, 
            <br>Wind Speed: ${windSpeed} m/s, 
            <br>Pressure: ${pressure} hPa`;

        // Set background image based on weather description
        setBackgroundImage(description);
    })
    .catch(error => console.error('Error fetching data:', error));