/**
 * Core
 * ============================================
 */
import { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import { Box, Typography, Grid, MenuItem } from '@mui/material';

/**
 * Components
 * ============================================
*/
// - Global -
import MoreMenu from '@/components/MoreMenu';

/**
 * Icon
 * ============================================
 */
import { EditOutlined } from '@mui/icons-material';

/**
 * Utils, Types, Functions
 * ============================================
 */
import { BenefitConfigurationListType } from '../Model/Types';
import { getBenefitConfigurationList } from '../Model/Functions';
import palette from '@/theme/palette';
import BenefitConfigurationDialog from './BenefitConfigurationDialog';
import { fNumber } from '@/utils/formatNumber';

export default function BenefitConfigurationList() {
    const { id: claim_id } = useParams();

    // State
    // --------------------
    const [BenefitConfigurationList, setBenefitConfigurationList] = useState<BenefitConfigurationListType[]>();
    const [BenefitConfigurationData, setBenefitConfigurationData] = useState<BenefitConfigurationListType>();
    const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);

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

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

        setBenefitConfigurationList(response);
    }

    return (
        <Box>
            {/* row list */}
            {
                BenefitConfigurationList?.map((row, index) => {
                    return (
                        <Box key={index} sx={{ border: '1px solid rgba(0,0,0,0.125)', px: '24px', py: '20px', marginBottom: '24px', borderRadius: '12px'}}>
                            <Grid container spacing={2}>
                                <Grid item xs={12}>
                                    <Grid container spacing={2}>
                                        <Grid item xs={6}>
                                            <Typography variant="body2" sx={{ fontWeight: 'bold'}}>
                                                {row.benefit_name}
                                            </Typography>
                                        </Grid>
                                        <Grid item xs={6} sx={{ display: 'flex', placeContent: 'end' }}>
                                            <MoreMenu actions={
                                                <>
                                                    <MenuItem onClick={() => {
                                                            setIsDialogOpen(true)
                                                            setBenefitConfigurationData(row)
                                                        }}
                                                    >
                                                        <EditOutlined />
                                                        Edit
                                                    </MenuItem>
                                                </>
                                            } />
                                        </Grid>
                                    </Grid>
                                </Grid>

                                <Grid item xs={12}>
                                    <Box sx={{ py: '8px', px: '12px', background: palette.light.grey[50012], borderRadius: '6px'}}>
                                        <Grid container spacing={1}>

                                            {/* Amount Incurred */}
                                            <Grid item xs={3}>
                                                <Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
                                                    <Grid item xs={12}>
                                                        <Typography variant="caption">
                                                            Amount Incurred
                                                        </Typography>
                                                    </Grid>
                                                    <Grid item xs={12}>
                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
                                                            {fNumber(row.amount_incurred)}
                                                        </Typography>
                                                    </Grid>
                                                </Grid>
                                            </Grid>

                                            {/* Amount Approved */}
                                            <Grid item xs={3}>
                                                <Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
                                                    <Grid item xs={12}>
                                                        <Typography variant="caption">
                                                            Amount Approved
                                                        </Typography>
                                                    </Grid>
                                                    <Grid item xs={12}>
                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
                                                            {fNumber(row.amount_approved)}
                                                        </Typography>
                                                    </Grid>
                                                </Grid>
                                            </Grid>

                                            {/* Amount Not Approved */}
                                            <Grid item xs={3}>
                                                <Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
                                                    <Grid item xs={12}>
                                                        <Typography variant="caption">
                                                            Amount Not Approved
                                                        </Typography>
                                                    </Grid>
                                                    <Grid item xs={12}>
                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
                                                            {fNumber(row.amount_not_approved)}
                                                        </Typography>
                                                    </Grid>
                                                </Grid>
                                            </Grid>

                                            {/* Excess Paid* */}
                                            <Grid item xs={3}>
                                                <Grid container>
                                                    <Grid item xs={12}>
                                                        <Typography variant="caption">
                                                            Excess Paid*
                                                        </Typography>
                                                    </Grid>
                                                    <Grid item xs={12}>
                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
                                                            {fNumber(row.excess_paid)}
                                                        </Typography>
                                                    </Grid>
                                                </Grid>
                                            </Grid>

                                        </Grid>
                                    </Box>
                                </Grid>
                            </Grid>
                        </Box>
                    )
                })
            }

            {/* Dialog */}
            <BenefitConfigurationDialog data={BenefitConfigurationData} isOpen={isDialogOpen} handleCancleProp={() => setIsDialogOpen(false)} handleSuccessProp={() => loadDataTableData()} />
        </Box>
    );
}
