/**
 * Core
 * ============================================
 */
import React, { useState } from "react";
import { useNavigate } from "react-router";
import { Box, Collapse, MenuItem, TableCell, TableRow, Stack } from "@mui/material";
import Visibility from '@mui/icons-material/Visibility';

/**
 * Component
 * ============================================
 */
// - Global -
import Label from "@/components/Label";
import TableMoreMenu from '@/components/table/TableMoreMenu';

/**
 * Utils, Types, Functions
 * ============================================
 */
import { fDate } from "@/utils/formatTime";
import { LaboratoriumResultListType } from "../Model/Types";

type Props = {
    row: LaboratoriumResultListType,
    number: number
}

export default function LaboratoriumResultListRow ({ ...props }: Props) {
    const navigate  = useNavigate()

    return (
        <React.Fragment>

            <TableRow hover sx={{ '& > td': { borderBottom: '1' } }}>
                <TableCell align="left" />
                <TableCell align="left">{props.row.member_id}</TableCell>
                <TableCell align="left">{props.row.name}</TableCell>
                <TableCell align="left">
                    <Label
                        variant="ghost"
                        color="default"
                    >
                        {fDate(props.row.startdate)}
                    </Label>
                </TableCell>
                <TableCell align="left">
                    <Label
                        variant="ghost"
                        color="default"
                    >
                        {fDate(props.row.enddate)}
                    </Label>
                </TableCell>
                <TableCell align="right" onClick={(e) => e.stopPropagation()}>
                    <Stack direction="row" justifyContent="flex-end" spacing={1}>
                        <TableMoreMenu actions={
                            <>
                                <MenuItem onClick={() => navigate(`/case_management/laboratorium_result/${props.row.member_id}/claims`)}>
                                    <Visibility />
                                    View
                                </MenuItem>
                            </>
                        } />
                    </Stack>
                </TableCell>
            </TableRow>

        </React.Fragment>
    );
}
