import React from 'react';
import PropTypes from 'prop-types';
import {
  AcceptButton,
  ButtonContainer,
  CardContainer,
  CardText,
  CountButton,
  DeclineButton,
  Header,
  ProfileImage,
  ProfileName,
  SeeAllButton,
  UserName,
  Wrapper,
} from "./styles";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";

const FriendRequestCard = ({
  user,
  count,
  showCountAndSeeAllButtons,
  showAcceptDeclineButtons,
  onAdd,
  onDecline,
  seeAll,
}) => {
  const { findText } = useTranslation(wordStore);
  return (
    <Wrapper>
      {/* {showCountAndSeeAllButtons && <Header>Friend Request</Header>
       } */}
      <Header>{findText("Friend Request")}</Header>
      <CardContainer multiple={showCountAndSeeAllButtons}>
        <ProfileImage src={user?.profileImage} alt={user?.profileName} />
        <CardText>
          <ProfileName>{user?.profileName}</ProfileName>
          <UserName>
            {user?.userName} <small>{findText("Sent you a friend")}</small>
          </UserName>
        </CardText>
        {showCountAndSeeAllButtons && (
          <ButtonContainer>
            <CountButton>
              {" "}
              + {count}
              {findText("Others")}
            </CountButton>
            {seeAll && (
              <SeeAllButton onClick={seeAll}>
                {findText("See All")}
              </SeeAllButton>
            )}
          </ButtonContainer>
        )}
        {showAcceptDeclineButtons && !showCountAndSeeAllButtons && (
          <ButtonContainer>
            <DeclineButton onClick={() => onDecline(user)}>
              {findText("Decline")}
            </DeclineButton>
            <AcceptButton onClick={() => onAdd(user)}>
              {findText("Accept")}
            </AcceptButton>
          </ButtonContainer>
        )}
      </CardContainer>
    </Wrapper>
  );
};
FriendRequestCard.propTypes = {
  user: PropTypes.shape({
    profileImage: PropTypes.string,
    profileName: PropTypes.string,
    userName: PropTypes.string,
  }).isRequired,
  count: PropTypes.number,
  showCountAndSeeAllButtons: PropTypes.bool,
  showAcceptDeclineButtons: PropTypes.bool,
  onAdd: PropTypes.func,
  onDecline: PropTypes.func,
  seeAll: PropTypes.func,
};
FriendRequestCard.defaultProps = {
  count: 0,
  showCountAndSeeAllButtons: false,
  showAcceptDeclineButtons: false,
  onAdd: () => {},
  onDecline: () => {},
  seeAll: null,
};
export default FriendRequestCard;
