import React, { useEffect, useState } from 'react';


const WeatherList = () => {

    const [weatherArray, setWeatherArray] = useState([]);
    const [weatherArrayAfterFilter, setWeatherArrayAfterFilter] = useState([]);

    useEffect(()=>{
        fetch('https://danepubliczne.imgw.pl/api/data/synop/')
        .then(resp=>resp.json())
        .then(weather=>{
            setWeatherArray(weather);
            setWeatherArrayAfterFilter(weather);
        });
    }, []);


    let weatherBoxes = weatherArrayAfterFilter.map(cityWeather=>{
        return (
            <div key={cityWeather.id_stacji}>
                <h2>{cityWeather.stacja}</h2>
                <p>{cityWeather.temperatura} st. C.</p>
                <p>{cityWeather.cisnienie} hPa</p>
            </div>
        );
    });


    const filterWeather = e => {

        let filteredWeatherArray = weatherArray.filter(cityWeather=>{
            return cityWeather.stacja.toUpperCase().includes(e.target.value.toUpperCase());
        });
        setWeatherArrayAfterFilter(filteredWeatherArray);
    }

    return (
        <div className="weather-list">
            <input type="text" placeholder="filtruj" onChange={filterWeather} />
            {weatherBoxes}
        </div>
    )
}

export default WeatherList;