/**
 * Core
 * ============================================
 */
import { useEffect, useState } from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router-dom';
import { Box, IconButton, Typography, Grid, Card, List, ListItem } from '@mui/material';
import { LoadingButton } from "@mui/lab";

/**
 * Components
 * ============================================
*/
// - Global -
import Page from '@/components/Page';
import Label from "@/components/Label";

/**
 * Icon
 * ============================================
 */
import ArrowBackIosNew from '@mui/icons-material/ArrowBackIosNew';
import FiberManualRecord from '@mui/icons-material/FiberManualRecord';

/**
 * Utils, Types, Functions
 * ============================================
 */
import { fDate, fDateOnly } from '@/utils/formatTime';
import { getMonitoringDetailList } from '../Model/Functions';
import { DetailMonitoringListType } from '../Model/Types';


export default function DetailMonitoringList() {
    const { member_id, claim_code } = useParams();
    const navigate  = useNavigate()
    const pageTitle = claim_code??'_ _ _ _';

    // State
    // --------------------
    const [detailMonitoringList, setDetailMonitoringList] = useState<DetailMonitoringListType[]>();

    // Use Effect
    // --------------------
    useEffect(() => {
        loadDataTableData();
    }, [])

    // Load Data
    // -------------------
    const loadDataTableData = async () => {
        const response = await getMonitoringDetailList(claim_code??'');

        setDetailMonitoringList(response);
    }

    return (
        <Page title={pageTitle} sx={{ px: 2 }}>
            <Grid container gap={6}>
                {/* back button */}
                <Grid item xs={12}>
                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
                        <IconButton size='large' color='inherit' onClick={() => navigate(`/case_management/daily_monitoring/${member_id}/claims`)} >
                            <ArrowBackIosNew/>
                        </IconButton>

                        <Typography variant="h5" sx={{ marginLeft: '24px' }}>
                            {pageTitle}
                        </Typography>
                    </Box>
                </Grid>

                {/* tabel claims */}
                <Grid item xs={12}>
                    <Grid container gap={4} sx={{ px: 2 }}>
                        {
                            detailMonitoringList?.map((row, index) => {
                                return (
                                    <Grid key={index} item xs={12}>
                                        <Card sx={{ border: '1px solid rgba(0,0,0,0.125)', px: '32px', py: '24px'}}>
                                            {/* card header */}
                                            <Box sx={{ pb: '20px', mb: '20px', borderBottom: '1px solid rgba(0,0,0,0.125)' }}>
                                                <Label
                                                    variant="ghost"
                                                    color="default"
                                                >
                                                    {row.created_at ? fDate(row.created_at) : '-'}
                                                </Label>
                                                
                                                    {row.discharge_date.discharge_date ? 
                                                    (<Label
                                                            variant="ghost"
                                                            color="success"
                                                            sx={{marginLeft: '85%'}}
                                                        >
                                                        Close Monitoring
                                                    </Label>) : (<Label
                                                            variant="ghost"
                                                            color="warning"
                                                            sx={{marginLeft: '77%'}}
                                                        >
                                                        On Monitoring
                                                    </Label>)}
                                                
                                            </Box>

                                            {/* card body */}
                                            <Grid container gap={4}>
                                                <Grid item xs={12}>
                                                    <Grid container gap={1}>
                                                        <Grid item xs={12}>
                                                            <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                                                                Subject :
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={12}>
                                                            <Typography variant="body2" color={"GrayText"}>
                                                                {row.subject}
                                                            </Typography>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>

                                                <Grid item xs={12}>
                                                    <Grid container gap={1}>
                                                        <Grid item xs={12}>
                                                            <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                                                                Object :
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={12}>
                                                            <Grid container spacing={2}>
                                                                <Grid item xs={6}>
                                                                    <Typography variant="body2" color={"GrayText"}>
                                                                        Body Temperature
                                                                    </Typography>
                                                                </Grid>
                                                                <Grid item xs={6}>
                                                                    <Typography variant="body2">
                                                                        {row.body_temperature}
                                                                    </Typography>
                                                                </Grid>
                                                                <Grid item xs={6}>
                                                                    <Typography variant="body2" color={"GrayText"}>
                                                                        Sistole
                                                                    </Typography>
                                                                </Grid>
                                                                <Grid item xs={6}>
                                                                    <Typography variant="body2">
                                                                        {row.sistole} mm[Hg]
                                                                    </Typography>
                                                                </Grid>
                                                                <Grid item xs={6}>
                                                                    <Typography variant="body2" color={"GrayText"}>
                                                                        Diastole
                                                                    </Typography>
                                                                </Grid>
                                                                <Grid item xs={6}>
                                                                    <Typography variant="body2">
                                                                        {row.diastole} mm[Hg]
                                                                    </Typography>
                                                                </Grid>
                                                                <Grid item xs={6}>
                                                                    <Typography variant="body2" color={"GrayText"}>
                                                                        Respiration Rate
                                                                    </Typography>
                                                                </Grid>
                                                                <Grid item xs={6}>
                                                                    <Typography variant="body2">
                                                                        {row.respiration_rate} / min
                                                                    </Typography>
                                                                </Grid>
                                                            </Grid>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>

                                                <Grid item xs={12}>
                                                    <Grid container gap={1}>
                                                        <Grid item xs={12}>
                                                            <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                                                                Analysis :
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={12}>
                                                            <Typography variant="body2" color={"GrayText"}>
                                                                {row.analysis}
                                                            </Typography>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>

                                                <Grid item xs={12}>
                                                    <Grid container gap={1}>
                                                        <Grid item xs={12}>
                                                            <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                                                                Medical Plan :
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={12}>
                                                            <List sx={{ color: 'GrayText' }}>
                                                                {
                                                                    row.medical_plan?.map((data, index) => {
                                                                        return (
                                                                            <ListItem key={index}>
                                                                                <FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} /> {data.medical_plan_str}
                                                                            </ListItem>
                                                                        )
                                                                    })
                                                                }
                                                            </List>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>

                                                <Grid item xs={12}>
                                                    <Grid container gap={1}>
                                                        <Grid item xs={12}>
                                                            <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                                                                Non Medikamentosa Plan :
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={12}>
                                                            <List sx={{ color: 'GrayText' }}>
                                                                {
                                                                    row.non_medikamentosa_plan?.map((data, index) => {
                                                                        return (
                                                                            <ListItem key={index}>
                                                                                <FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} /> {data.non_medikamentosa_plan_str}
                                                                            </ListItem>
                                                                        )
                                                                    })
                                                                }
                                                            </List>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>

                                                <Grid item xs={12}>
                                                    <Grid container gap={1}>
                                                        <Grid item xs={12}>
                                                            <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                                                                Laboratorium Result :
                                                            </Typography>
                                                        </Grid>
                                                        <Grid container spacing={2}>
                                                            <Grid item xs={6}>
                                                                <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                                                                    Date
                                                                </Typography>
                                                            </Grid>
                                                            <Grid item xs={6}>
                                                                <Typography variant="body2" color={"GrayText"}>
                                                                    { row.lab_date != null  ? fDate(row.lab_date) : '-'}
                                                                </Typography>
                                                            </Grid>
                                                        </Grid>
                                                        <Grid container spacing={2}>
                                                            <Grid item xs={6}>
                                                                <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                                                                    Location
                                                                </Typography>
                                                            </Grid>
                                                            <Grid item xs={6}>
                                                                <Typography variant="body2" color={"GrayText"}>
                                                                    {row.provider}
                                                                </Typography>
                                                            </Grid>
                                                        </Grid>
                                                        <Grid container spacing={2}>
                                                            <Grid item xs={6}>
                                                                <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                                                                    Examination
                                                                </Typography>
                                                            </Grid>
                                                            <Grid item xs={6}>
                                                                <Typography variant="body2" color={"GrayText"}>
                                                                    {row.examination}
                                                                </Typography>
                                                            </Grid>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>

                                                <Grid item xs={12}>
                                                    <Grid container gap={1}>
                                                        <Grid item xs={12}>
                                                            <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                                                                Document Confirmation Medical Letter:
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={12}>
                                                            <List sx={{ color: 'GrayText' }}>
                                                                {row.document?.map((data, index) => (
                                                                    <ListItem key={index}>
                                                                    {data.type === 'confirmation-medical-letter' ? (
                                                                        <>
                                                                        <FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} />
                                                                        <a
                                                                            href={data.path}  // Replace 'data.download_link' with the actual download link
                                                                            target="_blank"             // Optional: Open the link in a new tab
                                                                            rel="noopener noreferrer"   // Recommended when using target="_blank"
                                                                        >
                                                                            {data.file_name}
                                                                        </a>
                                                                        </>
                                                                    ) : null}
                                                                    </ListItem>
                                                                ))}
                                                            </List>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                                <Grid item xs={12}>
                                                    <Grid container gap={1}>
                                                        <Grid item xs={12}>
                                                            <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                                                                Document Medical Action Letter:
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={12}>
                                                            <List sx={{ color: 'GrayText' }}>
                                                                {row.document?.map((data, index) => (
                                                                    <ListItem key={index}>
                                                                    {data.type === 'medical-action-letter' ? (
                                                                        <>
                                                                        <FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} />
                                                                        <a
                                                                            href={data.path}  // Replace 'data.download_link' with the actual download link
                                                                            target="_blank"             // Optional: Open the link in a new tab
                                                                            rel="noopener noreferrer"   // Recommended when using target="_blank"
                                                                        >
                                                                            {data.file_name}
                                                                        </a>
                                                                        </>
                                                                    ) : null}
                                                                    </ListItem>
                                                                ))}
                                                            </List>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                                <Grid item xs={12}>
                                                    <Grid container gap={1}>
                                                        <Grid item xs={12}>
                                                            <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                                                                Document Laboratorium Result:
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={12}>
                                                            <List sx={{ color: 'GrayText' }}>
                                                                {row.document?.map((data, index) => (
                                                                    <ListItem key={index}>
                                                                    {data.type === 'laboratorium-result' ? (
                                                                        <>
                                                                        <FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} />
                                                                        <a
                                                                            href={data.path}  // Replace 'data.download_link' with the actual download link
                                                                            target="_blank"             // Optional: Open the link in a new tab
                                                                            rel="noopener noreferrer"   // Recommended when using target="_blank"
                                                                        >
                                                                            {data.file_name}
                                                                        </a>
                                                                        </>
                                                                    ) : null}
                                                                    </ListItem>
                                                                ))}
                                                            </List>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>

                                            </Grid>
                                        </Card>
                                    </Grid>
                                )
                            })
                        }
                    </Grid>
                </Grid>
            </Grid>
        </Page>
    );
}
