import React, { useState } from "react";
import axios from "axios";

function App(){
    const [city, setCity] = useState("");
    const [state, setState] = useState("");
    const [country, setCountry] = useState("");
    const [weatherInfo, setWeatherInfo] = useState("");
    
    const getWeather = async (event) => {

        event.preventDefault();
        const apiKey = process.env.REACT_APP_WEATHER_API_KEY;

        if (!country || !city) {
            alert("Enter a city name and Country code (eg. US,UK)");
            return;
        }

        try {
            const query = state 
            ? `${city},${state},${country}`
            : `${city},${country}`;

            const fetch = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${query}&appid=${apiKey}&units=imperial`);
            setWeatherInfo(fetch.data);

        } catch(error) {
          alert("Could not retrieve any weather data for that location.");  
        }
    };

    return (
        <div className="app">
            <div className="search">
                <form onSubmit={getWeather}>
                    <input
                        type="text"
                        value={city}
                        onChange={(e) => setCity(e.target.value)}
                        placeholder="City Name"
                    />
                    <input
                        type="text"
                        value={state}
                        onChange={(e) => setState(e.target.value)}
                        placeholder="State Code (optional,e.g.,CA)"
                    />
                    <input
                        type="text"
                        value={country}
                        onChange={(e) => setCountry(e.target.value)}
                        placeholder="Country Code (e.g., US)"
                    />
                    <button type="submit">Search Weather Data</button>
                </form>
            </div>
            <div className="location">
                <h1>{weatherInfo ? weatherInfo.name : ""}</h1>
            </div>
            <div className="containment1">
                <div className="top">
                    <div className="temperature">
                        <h1>{weatherInfo ? `${weatherInfo.main.temp}°F` : "Choose a City"}</h1>
                    </div>
                </div>
            </div>
            <div className="description">
                <p>{weatherInfo ? weatherInfo.weather[0].description : ""}</p>
            </div>
            <div className="containment2">
                <div className="bottom">
                    <div className="feels-like">
                        <p2>{weatherInfo ? `${weatherInfo.main.feels_like}°F` : ""}</p2>
                        <p>Feels Like</p>
                    </div>
                    <div className="humidity">
                        <p2>{weatherInfo ? `${weatherInfo.main.humidity}%` : ""}</p2>
                        <p>Humidity</p>
                    </div>
                    <div className="wind">
                        <p2>{weatherInfo ? `${weatherInfo.wind.speed}mph` : ""}</p2>
                        <p>Wind Speed</p>
                    </div>
                    <div className="wind-degree">
                        <p2>{weatherInfo ? `${weatherInfo.wind.deg}°` : ""}</p2>
                        <p>Wind Direction</p>
                    </div>
                </div>
            </div>
        </div>
    )   
}

export default App;
