const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

// retreive API data, display forecast info
export default function GeolocationForecast() {
  // initialize state variables for weather data and geo coordinates
  const [data, setData] = useState('');
  const [userLat, setUserLat] = useState(null);
  const [userLon, setUserLon] = useState(null);
  const [userStatus, setUserStatus] = useState(null);

  useEffect(() => {
    fetchUserGeolocationAndForecast();
  }, []);

  // get user's geo coordinates, insert into API query, return API response results
  async function fetchUserGeolocationAndForecast() {
    (function getUserGeoData() {
      if (!navigator.geolocation) {
        setUserStatus('Error: Geolocation is not supported by your browser');
      } else {
        setUserStatus('Loading...');
        navigator.geolocation.getCurrentPosition(
          (position) => {
            // update status and lat and lng position for user
            setUserStatus(null);
            setUserLat(position.coords.latitude);
            setUserLon(position.coords.longitude);
            console.log('geocoords saved to state')
            console.log('user geo data', userLat, userLon, userStatus);
          }, () => {
            setUserStatus('Unable to retrieve your location :(');
          });
      }
    })();
    const apiUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${userLat}&lon=${userLon}&units=imperial&appid=${API_KEY}`;
    axios.get(apiUrl)
      .then((res) => {
        // forecast data response from API
        const forecastData = res.data.daily;
        // update state variable with response data
        setData(forecastData);
        console.log('geoForecast res', forecastData);
        console.log('full geoForecast res', res);
      }).catch(error => console.error(`Error: ${error}`));
  }

  return (
    <div>
      <span><h1>7-Day Forecast</h1><LocationOnIcon fontSize="large" /></span>
      {/* <h4>{userStatus}</h4> */}
      <GeoForecast data={data} />
    </div>
  );
};