/**
 * Core
 * ============================================
 */
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Box, Grid, IconButton, Typography } from '@mui/material';
import { ArrowBackIosNew } from '@mui/icons-material';

/**
 * Components
 * ============================================
*/
// - Global -
import Page from '../../../components/Page';
// - Local -

/**
 * Utils, Types, Functions
 * ============================================
 */
import { getClaimList } from './Model/Functions';
import { ClaimListType, MemberDetailType } from './Model/Types';
import ClaimList from './Components/ClaimList';

export default function Claim() {
    const navigate = useNavigate()
    const { member_id } = useParams();

    // State
    // --------------------
    const [memberDetail, setMemberDetail] = useState<MemberDetailType>();
    const [claimList, setClaimList] = useState<ClaimListType[]>();

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

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

        setMemberDetail(response.member_detail);
        setClaimList(response.claim_list);
    }

    return (
        <Page title={ `claims | ${memberDetail?.name??'_ _ _'}` } 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`)} >
                            <ArrowBackIosNew/>
                        </IconButton>

                        <Typography variant="h5" sx={{ marginLeft: '24px' }}>
                            {memberDetail?.name??'_ _ _'}
                        </Typography>
                    </Box>
                </Grid>

                {/* tabel claims */}
                <Grid item xs={12}>
                    <ClaimList claim_list={claimList??null} />
                </Grid>
            </Grid>
        </Page>
    );
}
