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

/**
 * Types & Functions
 * ============================================
 */
import { getDailyMonitoringList } from "../Model/Functions";
import { DailyMonitoringListType } from "../Model/Types";
import DailyMonitoringListRow from "./DailyMonitoringListRow";

export default function DailyMonitoringList() {
    // State
    // --------------------
    const [dataTableIsLoading, setDataTableLoading] = useState<boolean>(true);
    const [dataTableData, setDataTableData] = useState<DailyMonitoringListType[]>([]);

    // Tabel Style
    // --------------------
    const TableHeadStyle = {
        fontWeight: 'bold',
    };

    // Load Data
    // -------------------
    const loadDataTableData = async () => {
        setDataTableLoading(true);

        const response = await getDailyMonitoringList();

        setDataTableLoading(false);
        setDataTableData(response);
    }

    useEffect(() => {
        loadDataTableData();
    }, [])

    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={150}>Member ID</TableCell>
                            <TableCell style={TableHeadStyle} align="left" width={'*'}>Name</TableCell>
                            <TableCell style={TableHeadStyle} align="left" width={160}>Start Date</TableCell>
                            <TableCell style={TableHeadStyle} align="left" width={160}>End Date</TableCell>
                            <TableCell style={TableHeadStyle} align="left" width={160}>Admission Date</TableCell>
                            <TableCell style={TableHeadStyle} align="left" width={160}>Provider</TableCell>
                            <TableCell align="left" width={"10"} />
                        </TableRow>
                    </TableHead>

                    {/* Body Table */}
                    {dataTableIsLoading ?
                    (
                        <TableBody>
                            <TableRow>
                                <TableCell colSpan={6} align="center">Loading</TableCell>
                            </TableRow>
                        </TableBody>
                    )
                    :
                    (
                        dataTableData.length == 0 ?
                        (
                            <TableBody>
                                <TableRow>
                                    <TableCell colSpan={6} align="center">No Data</TableCell>
                                </TableRow>
                            </TableBody>
                        )
                        :
                        (
                          <TableBody>
                            {dataTableData.map((row: DailyMonitoringListType, index) => (
                                <DailyMonitoringListRow key={index} number={index+1} row={row} />
                            ))}
                          </TableBody>
                        )
                    )}
                </Table>
            </TableContainer>
        </Box>
    )
}
