// API ключ от WeatherAPI
const API_KEY = '485eff906f7d473b913104046250710';


const citySelect = document.getElementById('city');
const getWeatherBtn = document.getElementById('get-weather');
const timelapseContainer = document.getElementById('timelapse-container');

// Добавляем скроллинг колесиком мыши для таймлапса
timelapseContainer.addEventListener('wheel', (event) => {
    event.preventDefault();
    timelapseContainer.scrollLeft += event.deltaY;
});

// Автоматическая загрузка погоды при загрузке страницы
window.addEventListener('load', () => {
    getWeatherBtn.click();
});

getWeatherBtn.addEventListener('click', async () => {
    const city = citySelect.value;
    const url = `https://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${city}&days=1&hourly=true&lang=ru`;

    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Ошибка сети');
        }
        const data = await response.json();
        displayTimelapse(data.forecast.forecastday[0].hour); // Таймлапс на сегодня
    } catch (error) {
        console.error('Ошибка загрузки данных:', error);
        alert('Не удалось загрузить данные о погоде. Проверьте API ключ.');
    }
});

function displayTimelapse(hourlyData) {
    timelapseContainer.innerHTML = '';
    hourlyData.forEach(item => {
        const div = document.createElement('div');
        div.className = 'timelapse-item';
        const hour = new Date(item.time).getHours();
        div.innerHTML = `
            <h3>${hour}:00</h3>
            <p class="temp">${Math.round(item.temp_c)}°C</p>
            <p class="desc">${item.condition.text}</p>
            <p class="prec">Осадки: ${item.precip_mm} мм (${item.chance_of_rain}%)</p>
        `;
        timelapseContainer.appendChild(div);
    });

    // Фокус на текущем времени
    const currentHour = new Date().getHours();
    const currentDiv = Array.from(timelapseContainer.children).find(div => {
        const h3 = div.querySelector('h3');
        return parseInt(h3.textContent) === currentHour;
    });
    if (currentDiv) {
        currentDiv.scrollIntoView({ behavior: 'smooth', inline: 'center' });
    }
}