import {
  IRankingTopCharacterEntry,
  IRankingTopSkillEntry,
} from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { Ellipsis } from '../shared/Ellipsis';

export interface ILeaderboardLevelProps {
  items: Set<IRankingTopCharacterEntry> | Set<IRankingTopSkillEntry> | null;
  rankType: string;
}

export const LeaderboardTable: React.FC<ILeaderboardLevelProps> = props => {
  const { items, rankType } = props;
  if (!items) return null;

  function isTopSkillEntry(entry: any): entry is IRankingTopSkillEntry {
    return 'skill' in entry;
  }

  return (
    <>
      <thead>
        <TableRowWrapper>
          <TableRowValue>
            <p>
              <Ellipsis maxLines={1} maxWidth="200px" fontSize="14px">
                Name
              </Ellipsis>
            </p>
          </TableRowValue>
          {rankType === 'Skill' ? (
            <TableRowValue>
              <p>
                <Ellipsis maxLines={1} maxWidth="200px" fontSize="14px">
                  Skill
                </Ellipsis>
              </p>
            </TableRowValue>
          ) : null}
          <TableRowValue>
            <p>
              <Ellipsis maxLines={1} maxWidth="200px" fontSize="14px">
                Level
              </Ellipsis>
            </p>
          </TableRowValue>
        </TableRowWrapper>
      </thead>
      <tbody>
        {Array.from(items).map(entry => (
          <TableRowWrapper key={entry.name}>
            <TableRowValue>
              <p>
                <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
                  {entry.name}
                </Ellipsis>
              </p>
            </TableRowValue>
            {isTopSkillEntry(entry) ? (
              <TableRowValue>
                <p>
                  <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
                    {entry.skill}
                  </Ellipsis>
                </p>
              </TableRowValue>
            ) : null}
            <TableRowValue>
              <p>
                <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
                  {entry.level}
                </Ellipsis>
              </p>
            </TableRowValue>
          </TableRowWrapper>
        ))}
      </tbody>
    </>
  );
};

const TableRowWrapper = styled.tr`
  margin: auto;
  padding: 0.5rem;

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

  p {
    font-size: 0.8rem;
  }
`;

const TableRowValue = styled.td`
  padding: 0 20px;
`;
