import { useReducer } from 'react';

const FeedbackSystem = () => {
  const initialState = {
    readability: {
      upvote: 0,
      downvote: 0,
    },
    performance: {
      upvote: 0,
      downvote: 0,
    },
    security: {
      upvote: 0,
      downvote: 0,
    },
    documentation: {
      upvote: 0,
      downvote: 0,
    },
    testing: {
      upvote: 0,
      downvote: 0,
    },
  };

  const aspectReducer = (state, action) => {
    switch (action.type) {
      case 'UPVOTE':
        return {
          ...state,
          [action.aspect]: {
            ...state[action.aspect],
            upvote: state[action.aspect].upvote + 1,
          },
        };

      case 'DOWNVOTE':
        return {
          ...state,
          [action.aspect]: {
            ...state[action.aspect],
            downvote: state[action.aspect].downvote + 1,
          },
        };

      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(aspectReducer, initialState);

  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        {Object.keys(initialState).map((el) => (
          <div key={el} className="pa-10 w-300 card">
            <h2>{el.charAt(0).toUpperCase() + el.slice(1)}</h2>
            <div className="flex my-30 mx-0 justify-content-around">
              <button
                onClick={() => dispatch({ type: 'UPVOTE', aspect: el })}
                className="py-10 px-15"
                data-testid={`upvote-btn-${el}`}
              >
                👍 Upvote
              </button>
              <button
                onClick={() => dispatch({ type: 'DOWNVOTE', aspect: el })}
                className="py-10 px-15 danger"
                data-testid={`downvote-btn-${el}`}
              >
                👎 Downvote
              </button>
            </div>
            <p className="my-10 mx-0" data-testid="upvote-count-0">
              Upvotes: <strong>{state[el]?.upvote || 0}</strong>
            </p>
            <p className="my-10 mx-0" data-testid="downvote-count-0">
              Downvotes: <strong>{state[el]?.downvote || 0}</strong>
            </p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default FeedbackSystem;