/**
 * 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';
import AddIcon from '@mui/icons-material/Add';

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

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

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

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

    return (
        <React.Fragment>

            <TableRow hover sx={{ '& > td': { borderBottom: '1' } }}>
                <TableCell align="left" />
                <TableCell align="left">
                    {props.row.admission_date == "0000-00-00 00:00:00" ?
                    ('-')
                    :
                    (
                        <Label
                            variant="ghost"
                            color="default"
                        >
                            {fDate(props.row.admission_date)}
                        </Label>
                    )}
                </TableCell>
                <TableCell align="left">
                    {props.row.discharge_date == "0000-00-00 00:00:00" ?
                    ('-')
                    :
                    (
                        <Label
                            variant="ghost"
                            color="default"
                        >
                            {fDate(props.row.discharge_date)}
                        </Label>
                    )}
                </TableCell>
                <TableCell align="left">{props.row.claim_code}</TableCell>
                <TableCell align="left">{props.row.service_type}</TableCell>
                <TableCell align="left">{props.row.claim_status}</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/${props.row.claim_code}/list_lab_result`)}>
                                    <Visibility />
                                    View
                                </MenuItem>
                                <MenuItem onClick={() => navigate(`/case_management/laboratorium_result/${props.row.member_id}/claims/${props.row.claim_code}/add_lab_result`)}>
                                    <AddIcon />
                                    Laboratorium Result
                                </MenuItem>
                            </>
                        } />
                    </Stack>
                </TableCell>
            </TableRow>

        </React.Fragment>
    );
}
