import React from 'react';
import TableEntry from '../../models/TableEntry';
import './UserList.scss';
import SeasonSwitch from "../SeasonSwitch/SeasonSwitch";
import UserStatsResponse from "../../models/UserStatsResponse";

const createTableEntries = (entries: TableEntry[]) =>
    entries.map((entry, index) => {
        const placement = index + 1;
        const placementClassName = placement === 1 ? "first-place"
            : (placement === 2 ? "second-place"
                : (placement === 3 ? "third-place"
                    : undefined))
        return (
            <tr key={index} className={placementClassName}>
                <td>{placement}</td>
                <td>{entry.name}</td>
                <td>{entry.rank}</td>
                <td>{entry.onlineTime}</td>
            </tr>
        )
    });

const UserList: React.FC<IUserListProperties> = (props: IUserListProperties) => (
    <div className="UserList" data-testid="UserList">
        <SeasonSwitch {...props} />
        <table className={!props.enabled ? "blurred" : ""}>
            <thead>
            <tr>
                <th>Placement</th>
                <th>Name</th>
                <th>Rank</th>
                <th>Online time</th>
            </tr>
            </thead>
            <tbody>
            {createTableEntries(props.userStats.stats)}
            </tbody>
        </table>
    </div>
)

export interface IUserListProperties {
    userStats: UserStatsResponse
    mocked?: boolean
    onSeasonIdChange: React.Dispatch<React.SetStateAction<string | undefined>>
    enabled: boolean
}

export default UserList;