import PropTypes from 'prop-types';
import {useEffect, useState} from 'react';

// material-ui
import {
    Box,
    Stack,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow, Typography,
} from '@mui/material';

// project import
import {dummyDataDetail1} from "./DummyRecord";
import {rankColor} from "../../themes/colorConst";
import * as React from "react";
import 'assets/style/rankStyle.css';


//import LooksOneIcon from '@mui/icons-material/LooksOne';
//import { DashboardOutlined } from '@ant-design/icons';
//import {EmojiEvents, LooksTwoRounded, Looks3Outlined} from '@mui/icons-material';

function descendingComparator(a, b, orderBy) {
    if (b[orderBy] < a[orderBy]) {
        return -1;
    }
    if (b[orderBy] > a[orderBy]) {
        return 1;
    }
    return 0;
}

function getComparator(order, orderBy) {
    return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);
}

function stableSort(array, comparator) {
    const stabilizedThis = array.map((el, index) => [el, index]);
    stabilizedThis.sort((a, b) => {
        const order = comparator(a[0], b[0]);
        if (order !== 0) {
            return order;
        }
        return a[1] - b[1];
    });
    return stabilizedThis.map((el) => el[0]);
}

// ==============================|| ORDER TABLE - HEADER CELL ||============================== //

const headCells = [
    /*{
        id: 'Rank',
        key: 'rank',
        align: 'left',
        disablePadding: false,
        label: 'Rank'
    },*/
    {
        id: 'Event',
        key: 'Event',
        align: 'left',
        disablePadding: true,
        label: 'Top 6 Event'
    },
    {
        id: 'No. of Award',
        key: 'awardCount',
        align: 'right',
        disablePadding: false,
        label: 'No. of Award'
    },
];

// ==============================|| ORDER TABLE - HEADER ||============================== //

function RankingTableHead({ order, orderBy }) {
    return (
        <TableHead>
            <TableRow>
                {headCells.map((headCell) => (
                    <TableCell
                        key={headCell.key}
                        align={headCell.align}
                        padding={headCell.disablePadding ? 'none' : 'normal'}
                        sortDirection={orderBy === headCell.id ? order : false}
                        className="number-default"
                    >
                        {headCell.label}
                    </TableCell>
                ))}
            </TableRow>
        </TableHead>
    );
}

RankingTableHead.propTypes = {
    order: PropTypes.string,
    orderBy: PropTypes.string
};
// ==============================|| ORDER TABLE ||============================== //

export default function RankingTable({boardData}) {
    const [rows,setRows] = useState(dummyDataDetail1);

    const [order] = useState('asc');
    const [orderBy] = useState('trackingNo');

    /*function renderRank(rank){
        switch(rank) {
            case 1:
                return <EmojiEvents sx={{ fontSize: 40, color: '#FFD700'}}/>;
            case 2:
                return <LooksTwoRounded sx={{ fontSize: 35, color: '#C0C0C0'}}/>;
            case 3:
                return <Looks3Outlined sx={{ fontSize: 30, color: '#CD853F' }}/>;
            default:
                return rank;
        }
    }*/

    function renderDetail(rank,detail){
        switch(rank) {
            case 1:
                return <Stack>
                    <Typography className="number-three" sx={{ color: rankColor[rank-1]}} style={{wordBreak: 'break-word', whiteSpace:'normal'}}>
                        {detail}
                    </Typography>
                </Stack>;
            case 2:
                return <Stack direction="row">
                    <Typography className="number-three" sx={{ color: rankColor[rank-1]}} style={{wordBreak: 'break-word', whiteSpace:'normal'}}>
                        {detail}
                    </Typography>
                </Stack>;
            case 3:
                return <Stack direction="row">
                    <Typography className="number-three" sx={{ color: rankColor[rank-1]}} style={{wordBreak: 'break-word', whiteSpace:'normal'}}>
                        {detail}
                    </Typography>
                </Stack>;
            default:
                return <Stack direction="row">
                    <Typography className="number-three" sx={{ color: rankColor[3]}} style={{wordBreak: 'break-word', whiteSpace:'normal'}}>
                        {detail}
                    </Typography>
                </Stack>;
        }

    }

    useEffect(() => {
        setRows(boardData);
    }, [boardData]);

    return (
        <Box>
            <TableContainer
                sx={{
                    width: '100%',
                    overflowX: 'auto',
                    position: 'relative',
                    display: 'block',
                    maxWidth: '100%',
                    '& td, & th': { whiteSpace: 'nowrap' }
                }}
            >
                <Table
                    size='small'
                    aria-labelledby="tableTitle"
                    sx={{
                        width: "100%",
                        '& .MuiTableCell-root': {
                            paddingTop: '5px',
                            paddingBottom: '5px',
                        },
                        '& .MuiTableCell-root:first-of-type': {
                            pl: 2
                        },
                        '& .MuiTableCell-root:last-of-type': {
                            pr: 3
                        },
                        '& .MuiDataGrid-cell': {
                            padding: 0,
                        },
                        '& .MuiTableRow-root': {
                            padding: 0,
                        },
                    }}
                >
                    <colgroup>
                        <col style={{width:'80%'}}/>
                        <col style={{width:'20%'}}/>
                        {/*<col style={{width:'10%'}}/>*/}
                    </colgroup>
                    <RankingTableHead order={order} orderBy={orderBy} />
                    <TableBody>
                        {stableSort(rows, getComparator(order, orderBy)).map((row, /*index*/) => {
                            return (
                                <TableRow
                                    hover
                                    tabIndex={-1}
                                    key={row.rank}
                                >
                                    {/*<TableCell component="th" id={labelId} scope="row" align="center">*/}
                                    {/*    {renderRank(row.rank)}*/}
                                    {/*</TableCell>*/}
                                    <TableCell
                                        sx={{padding:'3px'}}
                                        align="left"
                                    >
                                        {renderDetail(row.rank, row.eventName,row.eventId)}
                                    </TableCell>
                                    <TableCell
                                        align="right"
                                        sx={{mr:'2px'}}
                                        className="number-default"
                                    >
                                        {row.awardCount}
                                    </TableCell>
                                </TableRow>
                            );
                        })}
                    </TableBody>
                </Table>
            </TableContainer>
        </Box>
    );
}
