/**
 * 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";
import { ClearOutlined, LoopOutlined } from "@mui/icons-material";
import DialogConfirmation from "./DialogConfirmation";

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

export default function ClaimListRow ({ ...props }: Props) {
    const navigate  = useNavigate()
    const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
    const [code, setCode] = useState('');
    const [member_id, setMemberId] = useState('');
    const handleUpdate = (code: string, member_id: string) => {
        setOpenDialogSubmit(true)
        setMemberId(member_id)
        setCode(code)
    }

    return (
        <React.Fragment>

            <TableRow hover sx={{ '& > td': { borderBottom: '1' } }}>
                <TableCell align="left" />
                <TableCell align="left">
                    {props.row.admission_date == null?
                    ('-')
                    :
                    (
                        <Label
                            variant="ghost"
                            color="default"
                        >
                            {fDate(props.row.admission_date)}
                        </Label>
                    )}
                </TableCell>
                <TableCell align="left">
                    {props.row.discharge_date == null ?
                    ('-')
                    :
                    (
                        <Label
                            variant="ghost"
                            color="default"
                        >
                            {fDate(props.row.discharge_date)}
                        </Label>
                    )}
                </TableCell>
                <TableCell align="left">{props.row.code}</TableCell>
                <TableCell align="left">{props.row.service_name}</TableCell>
                <TableCell align="left">
                    {props.row.discharge_date == null ?
                        (
                            <Label
                            variant="ghost"
                            color="warning"
                            >
                            On Monitor
                            </Label>
                        ) :
                        (
                            <Label
                            variant="ghost"
                            color="success"
                            >
                            Close Monitor
                            </Label>
                        ) 
                    }
                   
                </TableCell>
                <TableCell align="right" onClick={(e) => e.stopPropagation()}>
                    <Stack direction="row" justifyContent="flex-end" spacing={1}>
                        {props.row.discharge_date == null ? 
                            (
                            <TableMoreMenu actions={
                                <>
                                    <MenuItem onClick={() => navigate(`/case_management/daily_monitoring/${props.row.member_id}/claims/${props.row.code}/list_monitoring`)}>
                                        <Visibility />
                                        View
                                    </MenuItem>
                                    <MenuItem onClick={() => navigate(`/case_management/daily_monitoring/${props.row.member_id}/claims/${props.row.code}/add_monitoring`)}>
                                        <AddIcon />
                                        Daily Monitoring
                                    </MenuItem>
                                    <MenuItem onClick={() => handleUpdate(props.row.code, props.row.member_id)}>
                                        <LoopOutlined />
                                        Update Status
                                    </MenuItem>
                                </>
                            } />
                            ) : 
                            (
                                <TableMoreMenu actions={
                                    <>
                                        <MenuItem onClick={() => navigate(`/case_management/daily_monitoring/${props.row.member_id}/claims/${props.row.code}/list_monitoring`)}>
                                            <Visibility />
                                            View
                                        </MenuItem>
                                    </>
                                } />
                            )
                        }
                        
                    </Stack>
                </TableCell>
            </TableRow>
            <DialogConfirmation 
                setOpenDialog={setOpenDialogSubmit}
                row={props.row}
                openDialog={openDialogSubmit}
            />

        </React.Fragment>
    );
}
