/**
 * 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, Stack, Link } 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 InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';

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


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

    // State
    // --------------------
    const [LabResultList, setLabResultList] = useState<DetailLabResultListType[]>();

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

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

        setLabResultList(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/laboratorium_result/${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 }}>
                        {
                            LabResultList?.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>
                                            </Box>

                                            {/* card body */}
                                            <Grid container gap={3}>
                                                <Grid item xs={12}>
                                                    <Grid container spacing={1}>
                                                        <Grid item xs={6}>
                                                            <Typography variant="body2" color={"GrayText"}>
                                                                Date
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={6}>
                                                            <Typography variant="body2">
                                                                {row.date}
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={6}>
                                                            <Typography variant="body2" color={"GrayText"}>
                                                                Location
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={6}>
                                                            <Typography variant="body2">
                                                                {row.location}
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={6}>
                                                            <Typography variant="body2" color={"GrayText"}>
                                                                Examination
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={6}>
                                                            <Typography variant="body2">
                                                                {row.examination}
                                                            </Typography>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>

                                                <Grid item xs={12}>
                                                    <Grid container gap={1}>
                                                        <Grid item xs={12}>
                                                            <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
                                                                Document :
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={12}>
                                                            {
                                                                row.lab_result_file.map((data, index) => {
                                                                    return (
                                                                        <Stack direction="row" justifyContent={'space-between'} key={index} sx={{ mt: '16px' }}>
                                                                            <Link href={data.lab_result_file_obj.path} underline='hover' target="_blank">
                                                                                <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
                                                                                    <InsertDriveFileIcon />
                                                                                    <Typography variant="body2" gutterBottom>{data.lab_result_file_obj.original_name??'-'}</Typography>
                                                                                </Stack>
                                                                            </Link>
                                                                        </Stack>
                                                                    )
                                                                })
                                                            }
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                        </Card>
                                    </Grid>
                                )
                            })
                        }
                    </Grid>
                </Grid>
            </Grid>
        </Page>
    );
}
