import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../../constants/uiColors';
import { Button, ButtonTypes } from '../../Button';

export interface IPartyRowProps {
  id: string;
  charName: string;
  charClass: string;
  charLevel: number;
  playerQty: number;
  isInvited: boolean;
  partyName: string;
}

export const PartyRow: React.FC<IPartyRowProps> = ({
  charName,
  charClass,
  charLevel,
  playerQty,
  isInvited,
  partyName,
}) => {
  return (
    <PartyWrapper>
      <TextContainer>{partyName}</TextContainer>
      <TextContainer>{charName}</TextContainer>
      <TextContainer>{charClass}</TextContainer>
      <TextContainer>{charLevel}</TextContainer>
      <TextContainer>{playerQty}/5</TextContainer>
      {isInvited ? (
        <>
          <Button buttonType={ButtonTypes.RPGUIButton}>Accept</Button>
          <div className="cancel-button">
            <Button buttonType={ButtonTypes.RPGUIButton}>Decline</Button>
          </div>
        </>
      ) : (
        <Button buttonType={ButtonTypes.RPGUIButton}>Join</Button>
      )}
    </PartyWrapper>
  );
};

const PartyWrapper = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .cancel-button {
    filter: grayscale(0.7);
  }
`;

const TextContainer = styled.div`
  color: ${uiColors.white};
`;
