/**
 * Core
 * ============================================
 */
import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";

/**
 * Component
 * ============================================
 */
import ClaimListRow from "./ClaimListRow";

/**
 * Types & Functions
 * ============================================
 */
import { ClaimListType } from "../Model/Types";

type Props = {
    claim_list: ClaimListType[] | null,
}

export default function ClaimList({ ...props }: Props) {
    // Tabel Style
    // --------------------
    const TableHeadStyle = {
        fontWeight: 'bold',
    };

    return (
        <Box>
            <TableContainer component={Paper}>
                <Table sx={{ minWidth: 250 }} size='medium' aria-label="collapsible table">
                    {/* Head Table */}
                    <TableHead>
                        <TableRow>
                            <TableCell style={TableHeadStyle} align="left" width={50} />
                            <TableCell style={TableHeadStyle} align="left" width={160}>Admission Date</TableCell>
                            <TableCell style={TableHeadStyle} align="left" width={160}>Discharge Date</TableCell>
                            <TableCell style={TableHeadStyle} align="left" width={200}>Code</TableCell>
                            <TableCell style={TableHeadStyle} align="left" width={'*'}>Service Type</TableCell>
                            <TableCell style={TableHeadStyle} align="left" width={200}>Status</TableCell>
                            <TableCell align="left" width={"10"} />
                        </TableRow>
                    </TableHead>

                    {/* Body Table */}
                    {props.claim_list == null ?
                    (
                        <TableBody>
                            <TableRow>
                                <TableCell colSpan={7} align="center">Loading</TableCell>
                            </TableRow>
                        </TableBody>
                    )
                    :
                    (
                        props.claim_list.length == 0 ?
                        (
                            <TableBody>
                                <TableRow>
                                    <TableCell colSpan={7} align="center">No Data</TableCell>
                                </TableRow>
                            </TableBody>
                        )
                        :
                        (
                            <TableBody>
                                {props.claim_list.map((row: ClaimListType, index) => (
                                    <ClaimListRow key={index} number={index+1} row={row} />
                                ))}
                            </TableBody>
                        )
                    )}
                </Table>
            </TableContainer>
        </Box>
    )
}
