import React, { useState } from "react";
import PropTypes from "prop-types";
import FriendRequestCard from "../friendRequestCard";
import { Container, Header, RequestList, SeeLessButton } from "./styles";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";

const FriendRequestList = ({ friendRequests, onAdd, onDecline }) => {
  const { findText } = useTranslation(wordStore);
  const [expanded, setExpanded] = useState(false);
  const [numRequests, setNumRequests] = useState(1);
  const handleSeeAllClick = () => {
    setExpanded(true);
    setNumRequests(friendRequests.length);
  };
  const handleCollapseClick = () => {
    setExpanded(false);
    setNumRequests(1);
  };
  return (
    <Container>
      <Header>
        {expanded && <h2>{findText("Friend Requests")}</h2>}

        {expanded && (
          <SeeLessButton onClick={handleCollapseClick}>
            {findText("see less")}
          </SeeLessButton>
        )}
      </Header>
      <RequestList>
        {friendRequests.slice(0, numRequests).map((request, index) => (
          <FriendRequestCard
            key={index}
            user={request}
            seeAll={handleSeeAllClick}
            onAdd={onAdd}
            onDecline={onDecline}
            count={
              !expanded && numRequests >= 1 ? friendRequests.length - 1 : null
            }
            showAcceptDeclineButtons={
              expanded || numRequests >= 1 || index === 0
            }
            showCountAndSeeAllButtons={!expanded && friendRequests.length > 1}
          />
        ))}
      </RequestList>
    </Container>
  );
};
FriendRequestList.propTypes = {
  friendRequests: PropTypes.array.isRequired,
  onAdd: PropTypes.func.isRequired,
  onDecline: PropTypes.func.isRequired,
};
export default FriendRequestList;
