import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../../constants/uiColors';
import { DraggableContainer } from '../../DraggableContainer';
import { RPGUIContainerTypes } from '../../RPGUI/RPGUIContainer';
import { IPlayersRowProps, PlayersRow } from './PlayersRows';

export interface IPartyInviteProps {
  playersRows: IPlayersRowProps[];
}

export const PartyInvite: React.FC<IPartyInviteProps> = ({ playersRows }) => {
  return (
    <DraggableContainer
      type={RPGUIContainerTypes.Framed}
      onCloseButton={() => {
        console.log('Close');
      }}
      width="600px"
      height="400px"
      cancelDrag=".playersRows"
    >
      <Wrapper>
        <div style={{ width: '100%' }}>
          <Title>Invite for Party</Title>
          <hr className="golden" />
        </div>
      </Wrapper>
      <RowsWrapper className="playersRows">
        {playersRows.map(playersRows => (
          <PlayersRow
            key={playersRows.id}
            charName={playersRows.charName}
            charClass={playersRows.charClass}
            charLevel={playersRows.charLevel}
            id={playersRows.id}
            isNotInvited={playersRows.isNotInvited}
          />
        ))}
      </RowsWrapper>
    </DraggableContainer>
  );
};

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
`;
const Title = styled.h1`
  font-size: 0.6rem;
  color: ${uiColors.yellow} !important;
`;

const RowsWrapper = styled.div`
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 200px;
`;
