import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../../constants/uiColors';
import { Button, ButtonTypes } from '../../Button';
import { DraggableContainer } from '../../DraggableContainer';
import { RPGUIContainerTypes } from '../../RPGUI/RPGUIContainer';
import { IPartyRowProps, PartyRow } from './PartyRows';

export interface IPartyDashboardProps {
  partyRows: IPartyRowProps[];
}

export const PartyDashboard: React.FC<IPartyDashboardProps> = ({
  partyRows,
}) => {
  return (
    <DraggableContainer
      type={RPGUIContainerTypes.Framed}
      onCloseButton={() => {
        console.log('Close');
      }}
      width="800px"
      height="400px"
      cancelDrag=".partyRows"
    >
      <Wrapper>
        <div style={{ width: '100%' }}>
          <Title>Party Dashboard</Title>
          <Button buttonType={ButtonTypes.RPGUIButton}>Create</Button>
          <hr className="golden" />
        </div>
      </Wrapper>
      <RowsWrapper className="partyRows">
        {partyRows.map(partyRows => (
          <PartyRow
            key={partyRows.id}
            charName={partyRows.charName}
            charClass={partyRows.charClass}
            charLevel={partyRows.charLevel}
            playerQty={partyRows.playerQty}
            id={partyRows.id}
            isInvited={partyRows.isInvited}
            partyName={partyRows.partyName}
          />
        ))}
      </RowsWrapper>
    </DraggableContainer>
  );
};

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
`;

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

const Title = styled.h1`
  font-size: 0.6rem;
  color: ${uiColors.yellow} !important;
`;
