document.querySelector(".country-selection").addEventListener("click", () => {
  let country = document.querySelector(".country-selection");
  if (country.classList.contains("active")) {
    country.classList.remove("active");
  } else {
    country.classList.add("active");
  }
});

//Get and Show Today's weather based on latitude and longitutde
let getWeather = (lat, long, farenheit = true) => {
  return fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=9af05c564f8048803d0ce5cbfef989af`
  )
    .then(res => {
      if (res.status === 200) {
        return res.json();
      } else {
        throw res.status;
      }
    })
    .then(res => {
      console.log(res);
      //Weather Icon
      let weatherIcon = `http://openweathermap.org/img/w/${
        res.weather[0].icon
      }.png`;
      // Temperature in Farenheit or Celsius
      let temp;
      if (farenheit) {
        temp = res.main.temp * (9 / 5) - 459.67;
      } else {
        temp = res.main.temp - 273.15;
      }
      temp = temp.toFixed(1);
      return {
        weatherIcon,
        temp
      };
    })
    .catch(err => {
      return 1;
    });
};

let setWeatherWithLocation = () => {
  // Check if geolocation is turned on in user's browser
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(position => {
      //Use getWeather to get the weather object with icon & temperature in celsius
      getWeather(
        position.coords.latitude,
        position.coords.longitude,
        false
      ).then(res => {
        document.querySelector(".weather-temp").innerHTML = `${
          res.temp
        } &#8451`;
        document.querySelector(".weather-img").src = res.weatherIcon;
      });
    }, error => 1);
  } else {
    //if no geolocation, return 1
    console.log("no geolocation");
    return 1;
  }
};

let setInfo = () => {
  /*
    DATE SECTION
  */
  let months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ];
  let days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
  ];
  let date = new Date();
  let year = date.getFullYear();
  let day_number = date.getDate();
  let day_string = days[date.getDay()];
  let month = months[date.getMonth()];
  document.querySelector(
    ".date"
  ).innerText = `${day_string} ${month} ${day_number} ${year}`;

  /*
    WEATHER SECTION
  */
  setWeatherWithLocation();
};

setInfo();
/*
  Start of News Section
*/

/*
  Main News Component - Parent
  Checks for changes to country and category, passes the values down to NewsCardHandler component
*/

class MainNewsComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { country: "US", category: "Health" };
  }
  componentDidMount() {
    document.querySelectorAll(".topic").forEach(node =>
      node.addEventListener("click", () => {
        this.setState(prevState => ({
          ...prevState,
          category: node.innerText
        }));
        //Removes *active* class from all topic nodes
        document.querySelectorAll(".topic").forEach(node2 => {
          if (node2.classList.contains("active")) {
            node2.classList.remove("active");
          }
        });
        //Adds *active* class to currently clicked node
        node.classList.add("active");
      })
    );
    document.querySelectorAll(".country").forEach(node =>
      node.addEventListener("click", () => {
        this.setState(prevState => ({
          ...prevState,
          country: node.id
        }));
      })
    );
  }
  render() {
    return (
      <NewsCardsHandler
        country={this.state.country}
        category={this.state.category}
      />
    );
  }
}

/*
   News Cards Handler
   Calls news api, and sends the returned array through to NewsCard component once promise resolves
*/

class NewsCardsHandler extends React.Component {
  constructor(props) {
    super(props);
    this.state = { arr: [{ title: "loading" }] };
  }
  getURL(country, category) {
    let url = `https://newsapi.org/v2/top-headlines?country=${country}&category=${category}&apiKey=283ea64ae31249498b803c3022a7210e`;
    fetch(url)
      .then(res => {
        if (res.status === 200) {
          return res;
        } else {
          throw res;
        }
      })
      .then(res => res.json())
      .then(res => res.articles)
      .then(res => {
        console.log(res);
        this.setState(() => ({ arr: res }));
      })
      .catch(err => console.log(err));
  }
  componentDidMount() {
    this.getURL(this.props.country, this.props.category);
  }
  componentWillReceiveProps(newProps) {
    this.getURL(newProps.country, newProps.category);
  }
  render() {
    return <NewsCards arr={this.state.arr} />;
  }
}
/*
  News Cards Component
  UI component --> 
*/
const NewsCards = props =>
  props.arr.map(item => (
    <div className="newsCard">
      <img src={item.urlToImage} />
      <div className="title"><a href={item.url} target="_blank">{item.title}</a></div>
      <div className="description">{item.description}</div>
      <div className="read-more"><a target="_blank" href={item.url}>
        {item.url ? "Read Article" : false}
        </a></div>
    </div>
  ));

ReactDOM.render(<MainNewsComp />, document.getElementById("cardHolder"));