import { cleanup } from "@testing-library/react";

afterEach(() => {
  cleanup();
});

import React, { useMemo, useReducer } from "react";

const init = [
  {
    name: "Readability",
    up: 0,
    down: 0,
  },
  {
    name: "Performance",
    up: 0,
    down: 0,
  },
  {
    name: "Security",
    up: 0,
    down: 0,
  },
  {
    name: "Documentation",
    up: 0,
    down: 0,
  },
  {
    name: "Testing",
    up: 0,
    down: 0,
  },
]
const reducer = (s, { aspectName, choice }) => {
  const state = [...s]
  const index = state.findIndex(a => a.name === aspectName)
  if (choice === "up")
    state[index].up += 1
  else
    state[index].down += 1
  return [...state]
}

const FeedbackSystem = () => {
  const [aspects, vote] = useReducer(reducer, [...init])
  const aspectsMemo = useMemo(() => aspects.map((a, i) => {
    return <div className="pa-10 w-300 card" key={a.name}>
      <h2>{a.name}</h2>
      <div className="flex my-30 mx-0 justify-content-around">
        <button className="py-10 px-15" data-testid={"upvote-btn-" + i}
          onClick={() => vote({ aspectName: a.name, choice: "up" })}>
          👍 Upvote
        </button>
        <button className="py-10 px-15 danger" data-testid={"downvote-btn-" + i}
          onClick={() => vote({ aspectName: a.name, choice: "down" })}>
          👎 Downvote
        </button>
      </div>
      <p className="my-10 mx-0" data-testid={"upvote-count-" + i}>
        Upvotes: <strong>{a.up}</strong>
      </p>
      <p className="my-10 mx-0" data-testid={"downvote-count-" + i}>
        Downvotes: <strong>{a.down}</strong>
      </p>
    </div>
  }), [aspects, vote])
  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        {aspectsMemo}
      </div>
    </div>
  );
};

export default FeedbackSystem;