import React, { Fragment } from 'react';
import WeatherAppContainer from './WeatherAppContainer';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';

const App = () => {
  return (
    <Fragment>
      <Box pb={5} pt={3} color='primary.main'>
        <Grid container justify='center'>
          <Typography variant='h4'>React Weather</Typography>
        </Grid>
      </Box>
      <Box color='text.secondary'>
        <WeatherAppContainer />
      </Box>
    </Fragment>
  );
};

export default App;

/////////////////////////////

import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import SearchIcon from '@material-ui/icons/Search';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';

const Search = ({ onSubmit }) => {
  const [userQuery, setUserQuery] = useState('');

  const handleChange = event => {
    setUserQuery(event.target.value);
  };

  const handleSubmit = event => {
    event.preventDefault();
    onSubmit(userQuery);
  };

  return (
    <Box pb={5}>
      <Grid container justify='center'>
        <form onSubmit={handleSubmit}>
          <TextField
            type='text'
            onChange={handleChange}
            value={userQuery}
            label='Enter a City'
          />

          <Button
            type='submit'
            variant='contained'
            color='primary'
            startIcon={<SearchIcon />}
          >
            Search
          </Button>
        </form>
      </Grid>
    </Box>
  );
};

export default Search;

/////

import React from 'react';
import CircularProgress from '@material-ui/core/CircularProgress';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

const Form = ({ weatherData, fetchState }) => {
  const showText = () => {
    if (fetchState === 'ERROR') {
      return 'City not found!';
    } else if (fetchState === 'LOADING') {
      return <CircularProgress />;
    } else {
      return null;
    }
  };

  const showIcon = () => {
    return (
      weatherData.icon && (
        <img
          src={`http://openweathermap.org/img/wn/${weatherData.icon}@2x.png`}
          alt='Weather Icon'
        />
      )
    );
  };

  return (
    <Grid
      textAlign='center'
      container
      direction='column'
      justify='center'
      alignItems='center'
    >
      <Box bgcolor='secondary.main'>
        <Grid>
          <Typography variant='h6'>{showText()}</Typography>
        </Grid>
      </Box>

      <Grid>
        <Typography variant='h1'>
          {weatherData.temperature &&
            `${Math.floor(weatherData.temperature)}°C`}
        </Typography>
      </Grid>

      <Grid>
        <Typography variant='h6'>
          {weatherData.city && `${weatherData.city}, ${weatherData.country}`}
        </Typography>
      </Grid>

      <Grid>{showIcon()}</Grid>

      <Grid>
        <Typography variant='h5'>
          {weatherData.description.charAt(0).toUpperCase() +
            weatherData.description.slice(1)}
        </Typography>
      </Grid>
    </Grid>
  );
};

export default Form;

////

import React, { useState, Fragment } from 'react';
import SearchResults from './SearchResults';
import SearchForm from './SearchForm';

const WeatherAppContainer = () => {
  const [fetchState, setFetchState] = useState(null);
  const [weatherData, setWeatherData] = useState({
    country: '',
    city: '',
    temperature: '',
    description: '',
    icon: ''
  });

  const fetchWeatherData = userQuery => {
    const API_KEY = process.env.REACT_APP_API_KEY;
    setFetchState('LOADING');
    fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${userQuery}&units=metric&appid=${API_KEY}`
    )
      .then(response => response.json())
      .then(data => {
        setWeatherData({
          country: data.sys.country,
          city: data.name,
          temperature: data.main.temp,
          description: data.weather[0].description,
          icon: data.weather[0].icon
        });
        setFetchState(null);
      })
      .catch(() => {
        setFetchState('ERROR');
      });
  };

  return (
    <Fragment>
      <SearchForm onSubmit={fetchWeatherData} />
      <SearchResults weatherData={weatherData} fetchState={fetchState} />
    </Fragment>
  );
};

export default WeatherAppContainer;