import {
    Container,
    Grid,
    Stack,
    Typography,
    Card,
    Dialog,
    TableRow,
    Tab,
    TableCell,
    Collapse,
    AccordionSummary,
    AccordionDetails,
    IconButton,
 } from '@mui/material';
// components
import Page from '../../../components/Page';
// utils
import useSettings from '../../../hooks/useSettings';
// react
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import { useEffect, useState, useRef, useMemo } from 'react';
import axios from '../../../utils/axios';
// pages
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import { DetailFinalLogType } from './Model/Types';
import { fDate, fDateTimesecond } from '@/utils/formatTime';
import { Button } from '@mui/material';
import DialogConfirmation from '../FinalLog/Components/DialogConfirmation';
import Label from '@/components/Label';
import { Box } from '@mui/system';
import { Accordion } from '@mui/material';
import { Delete, EditOutlined, ExpandMore } from '@mui/icons-material';
import {BenefitData } from '../FinalLog/Model/Types'
import AddIcon from '@mui/icons-material/Add';

// Import Card Detail Final LOG
import CardDetail from '../Components/CardDetail';
import CardService from '../Components/CardService';
import CardExclusion from '../Components/CardExclusion';
import CardBenefit from '../Components/CardBenefit';

// Import Dialog
import DialogHospitalCare from './Components/DialogHospitalCare';
import DialogBenefit from './Components/DialogBenefit';
import DialogMedicine from './Components/DialogMedicine';
import DialogDelete from './Components/DialogDelete';
import DialogEditBenefit from './Components/DialogEditBenefit'; 
import { DialogDeleteMedicine } from './Components/DialogDelete';

import MoreMenu from '@/components/MoreMenu';
import { MenuItem } from '@mui/material';
import { fNumber } from '@/utils/formatNumber';
import palette from '@/theme/palette';
import CardMedicine from '../Components/CardMedicine';
import CardFile from '../Components/CardFile';


// ----------------------------------------------------------------------

export default function Detail() {
    const location = useLocation();
    const queryParams = new URLSearchParams(location.search);

    const navigate = useNavigate();
    const { themeStretch } = useSettings();
    const [requestLog, setRequestLog] = useState<DetailFinalLogType>();
   

    const { id } = useParams();

    useEffect(() => {
        axios
        .get('customer-service/request/'+id)
        .then((response) => {
            setRequestLog(response.data.data)
        })
        .catch((error) => {
            console.error(error);
        })
    }, [id]);

    const style1 = {
        color: '#919EAB',
        width: '30%'
    }
    const style2 = {
        width: '70%'
    }
    const marginBottom1 = {
        marginBottom: 1,
    }
    const marginBottom2 = {
        marginBottom: 2,
    }

    const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
    const [openDialogHospital, setDialogHospital] = useState(false);
    const [openDialogBenefit, setDialogBenefit] = useState(false);
    const [openDialogMedicine, setDialogMedicine] = useState(false);

    // Handel Delete Detail Benefit
    const [idBenefitData, setIdBenefitData] = useState<number>();
    const [openDialogDeleteBenefit, setDialogDeleteBenefit] = useState(false)

    const [approve, setApprove] = useState('')

    // Handle Edit Detail Benefit
    const [openDialogEditBenefit, setDialogEditBenefit] = useState(false)
    const [BenefitConfigurationData, setBenefitConfigurationData] = useState<BenefitData>();
    return (
        <Page title='Detail'>
        <Container maxWidth={themeStretch ? false : 'xl'}>
            <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
            <ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
            <Typography variant="h5" sx={{marginLeft:2}}>{(requestLog && requestLog.code ? requestLog.code : '')}</Typography>
            </Stack>
            <Grid container spacing={2}>
                {/* Detail */}
                <Grid item xs={12} md={12}>
                    <CardDetail
                        requestLog={requestLog}
                    >
                    </CardDetail>
                </Grid>

                {/* Service */}
                <Grid item xs={12} md={12} marginTop={2}>
                    <CardService 
                        requestLog={requestLog}
                        isFinalLog={true}
                    >
                    </CardService>
                </Grid>
                
                {/* Exclusion */}
                <Grid item xs={12} md={12} marginTop={2}>
                    <CardExclusion 
                        requestLog={requestLog}
                    >
                    </CardExclusion>
                </Grid>

                {/* Hospital Care */}
                {/* <Grid item xs={12} md={12}>
                    <Card sx={{padding:2}}  >
                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>History of Hospital Care</Typography>
                                <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
                                setDialogHospital(true);
                            }} >
                                    <Typography variant="button" display="block">History</Typography>
                                </Button>
                        </Stack>
                    </Card>
                    <DialogHospitalCare
                        requestLog={requestLog}
                        openDialog={openDialogHospital}
                        setOpenDialog={setDialogHospital}
                        
                    >
                    </DialogHospitalCare>
                </Grid> */}

                {/* Benefit */}
                <Grid item xs={12} md={12}>
                    <Card sx={{padding:2}}  >
                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Benefit</Typography>
                                <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}  onClick={() => {
                                    setDialogBenefit(true);
                                }} >
                                    <Typography variant="button" display="block">Benefit</Typography>
                                </Button>
                        </Stack>

                        {requestLog?.benefit_data?.map((item, index) => (
                            <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'}}>
                                                {item.benefit?.description}
                                            </Typography>
                                        </Grid>
                                        <Grid item xs={6} sx={{ display: 'flex', placeContent: 'end' }}>
                                            <MoreMenu actions={
                                                <>
                                                    <MenuItem onClick={() => {
                                                            setDialogEditBenefit(true)
                                                            setIdBenefitData(item.id)
                                                            setBenefitConfigurationData(item)
                                                        }}
                                                    >
                                                        <EditOutlined />
                                                        Edit
                                                    </MenuItem>
                                                    <MenuItem onClick={() => {
                                                        setIdBenefitData(item.id)
                                                        setDialogDeleteBenefit(true)
                                                    }}
                                                    >
                                                        <Delete color='error'/>
                                                        Delete
                                                    </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={2}>
                                                <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(item.amount_incurred)}
                                                        </Typography>
                                                    </Grid>
                                                </Grid>
                                            </Grid>

                                            {/* Amount Approved */}
                                            <Grid item xs={2}>
                                                <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(item.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(item.amount_not_approved)}
                                                        </Typography>
                                                    </Grid>
                                                </Grid>
                                            </Grid>

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

                                            {/* Keterangan* */}
                                            <Grid item xs={3}>
                                                <Grid container>
                                                    <Grid item xs={12}>
                                                        <Typography variant="caption">
                                                            Keterangan*
                                                        </Typography>
                                                    </Grid>
                                                    <Grid item xs={12}>
                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
                                                            {item.keterangan}
                                                        </Typography>
                                                    </Grid>
                                                </Grid>
                                            </Grid>

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

                    {/* PR Buat pindahin ke componen */}
                    {/* <CardBenefit
                        requestLog={requestLog}
                    >

                    </CardBenefit> */}

                    <DialogBenefit
                        requestLog={requestLog}
                        openDialog={openDialogBenefit}
                        setOpenDialog={setDialogBenefit}
                        
                    />
                    {/* Dialog Edit */}
                    <DialogEditBenefit
                        id={idBenefitData}
                        data={BenefitConfigurationData}
                        openDialog={openDialogEditBenefit}
                        setOpenDialog={setDialogEditBenefit}
                    >

                    </DialogEditBenefit>
                    {/* Dialog Delete */}
                    <DialogDelete 
                        id={idBenefitData}
                        openDialog={openDialogDeleteBenefit}
                        setOpenDialog={setDialogDeleteBenefit}
                    />
                </Grid>

                {/* Medicine */}
                <Grid item xs={12} md={12}>
                    <Card sx={{padding:2}}  >
                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Medicine</Typography>
                                <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
                                    setDialogMedicine(true)
                                }} >
                                    <Typography variant="button" display="block">Medicine</Typography>
                                </Button>
                        </Stack>

                        {requestLog?.medicine.map((item, index) => (
                            <Grid
                                container
                                direction="row"
                                alignItems="center"
                                justifyContent="space-between"  // Menempatkan item ke sebelah kiri dan kanan
                                sx={{ marginBottom: 2 }}
                            >
                                <Typography variant='subtitle1'>{item.medicine}</Typography>
                                <Typography variant="subtitle1">Rp. {fNumber(item.price)}
                                    <IconButton size='large' color='error' onClick={() => {
                                        setIdBenefitData(item.id)
                                        setDialogDeleteBenefit(true)
                                    }}>
                                        <Delete color='error'/>
                                    </IconButton>
                                    </Typography>
                            </Grid>
                        ))}

                        <DialogMedicine
                            requestLog={requestLog}
                            openDialog={openDialogMedicine}
                            setOpenDialog={setDialogMedicine}
                        />
                        <DialogDeleteMedicine 
                            id={idBenefitData}
                            openDialog={openDialogDeleteBenefit}
                            setOpenDialog={setDialogDeleteBenefit}
                        />
                    </Card>
                </Grid>

                {/* File */}
                <Grid item xs={12} md={12}>
                    <CardFile
                        requestLog={requestLog}
                    />
                </Grid>

                {requestLog?.status_final_log == 'requested' ? (
                    <Grid item xs={12} md={12}>
                    <Stack direction="row" padding={4} sx={{ justifyContent: 'space-between' }}>
                        <>
                        <div>
                            <Button
                            variant="outlined"
                            sx={{ color: '#FF4842', borderColor: '#FF4842' }}
                            onClick={() => {
                                setOpenDialogSubmit(true);
                                setApprove('declined');
                            }}
                            >
                            Decline
                            </Button>
                        </div>
                        <div>
                            <Button
                            variant="contained"
                            onClick={() => {
                                setOpenDialogSubmit(true);
                                setApprove('approved');
                            }}
                            >
                            Approve
                            </Button>
                        </div>
                        </>
                        <DialogConfirmation
                            setOpenDialog={setOpenDialogSubmit}
                            requestLog={requestLog}
                            openDialog={openDialogSubmit}
                            approve={approve}
                            ></DialogConfirmation>
                    </Stack>
                </Grid>
                ) : null}
                
            </Grid>
        </Container>
        </Page>
    );
}