import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../../constants/uiColors';
import { HighlightedText } from '../../Text/HighlightedText';
import { Ellipsis } from '../../shared/Ellipsis';

export interface IPartyManagerRowProps {
  id: string;
  charName: string;
  charClass: string;
  isLeader: boolean;
  leaderId: string;
  userId: string;
  onRemovePlayer: (id: string) => void;
  onChangeLeader: (id: string) => void;
}

export const PartyManagerRow: React.FC<IPartyManagerRowProps> = ({
  charName,
  charClass,
  isLeader,
  id,
  leaderId,
  userId,
  onRemovePlayer,
  onChangeLeader,
}) => {
  const isCurrentUser = id === userId;
  const canRemove = leaderId === userId || isCurrentUser;

  return (
    <PartyWrapper>
      <TextContainer>
        <Ellipsis maxLines={1} maxWidth="300px">
          {charName} {isCurrentUser ? '(You)' : ''} {isLeader ? '(Leader)' : ''}
        </Ellipsis>
      </TextContainer>
      <TextContainer>
        <Ellipsis maxLines={1} maxWidth="300px">
          {charClass}
        </Ellipsis>
      </TextContainer>
      <ButtonContainer>
        {canRemove && (
          <HighlightedText onPointerDown={() => onRemovePlayer(id)}>
            {isCurrentUser ? 'Leave' : 'Remove'}
          </HighlightedText>
        )}
        {leaderId === userId && leaderId !== id && (
          <HighlightedText onPointerDown={() => onChangeLeader(id)}>
            New Leader
          </HighlightedText>
        )}
      </ButtonContainer>
    </PartyWrapper>
  );
};

const PartyWrapper = styled.div`
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: center;
  padding: 0.5rem;
  min-height: 50px;
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid ${uiColors.darkGray};

  &:hover {
    background-color: ${uiColors.darkGray};
    cursor: pointer;
  }
`;

const TextContainer = styled.div`
  color: ${uiColors.white};
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
`;

const ButtonContainer = styled.div`
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: flex-start;
`;
