import "h8k-components";

import Articles from "./components/Articles";

import "./App.css";
import {useState} from "react";

function App({ articles }) {

 const [sortBy, setSortBy] = useState("upvotes");

  const sortedArticles = [...articles].sort((a, b) => {
    if (sortBy === "upvotes") return b.upvotes - a.upvotes;
    if (sortBy === "date") return new Date(b.date) - new Date(a.date);
    return 0;
  });

  const handleMostUpvoted = () => {
    setSortBy("upvotes");
  }

  const handleMostRecent = () => {
    setSortBy("date");
  }

  return (
    <>
      <h8k-navbar header="Sorting Articles"></h8k-navbar>
      <div className="App">
        <div className="layout-row align-items-center justify-content-center my-20 navigation">
          <label className="form-hint mb-0 text-uppercase font-weight-light">
            Sort By
          </label>
          <button
            data-testid="most-upvoted-link"
            className="small"
            onClick={handleMostUpvoted}
          >
            Most Upvoted
          </button>
          <button
            data-testid="most-recent-link"
            className="small"
            onClick={handleMostRecent}
          >
            Most Recent
          </button>
        </div>
        <Articles articles={sortedArticles} />
      </div>
    </>
  );
}

export default App;