import {
    Container,
    Grid,
    Stack,
    Typography,
    Card,
    Dialog,
    MenuItem,
 } 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 { DetailRequestLogType } from './Model/Types';
import { fDate, fDateTimesecond } from '@/utils/formatTime';
import { Button } from '@mui/material';
import DialogConfirmation from './Components/DialogConfirmation';
import MoreMenu from '@/components/MoreMenu';
import { EditOutlined } from '@mui/icons-material';
import DialogEditInformation from './Components/DialogEditInformation';

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

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

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

    const { id } = useParams();

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

    function toTitleCase(str: string | null) {
        return str.replace(/\w\S*/g, function(txt) {
            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
        });
    }

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

    const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
    const handleCloseDialogSubmit = () => {
        setOpenDialogSubmit(false);
    }
    
    const [approve, setApprove] = useState('')
    
    const [openDialogEdit, setOpenDialogEdit] = useState(false);
    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}>
                <Grid item xs={12} md={12}>
                    <Card sx={{padding:2}}  >
                        <Grid container spacing={2}> 
                            <Grid item xs={6}>
                                <Typography variant='subtitle1' sx={{ color: '#19BBBB', marginBottom: 4 }} gutterBottom>
                                Detail
                                </Typography>
                            </Grid>
                            <Grid item xs={6} sx={{ display: 'flex', placeContent: 'end' }}>
                                <MoreMenu
                                    actions={
                                    <>
                                        <MenuItem onClick={() => {
                                            setOpenDialogEdit(true);
                                        }}>
                                        <EditOutlined />
                                        Edit
                                        </MenuItem>
                                    </>
                                    }
                                />
                            </Grid>
                        
                        </Grid>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Provider Name</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.provider}</Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Date Of Birth</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.date_of_birth ? fDate(requestLog?.date_of_birth) : '-'}</Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Marital Status</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.marital_status}</Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
                        </Stack>

                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>No KTP</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.no_identitas ? requestLog?.no_identitas : '-'}</Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Keterangan</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.keterangan ? requestLog?.keterangan : '-'}</Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Hak Kamar Pasien</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.hak_kamar_pasien ? requestLog?.hak_kamar_pasien : '-'}</Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Penempatan Kamar</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.penempatan_kamar ? requestLog?.penempatan_kamar : '-'}</Typography>
                        </Stack>
                    </Card>
                </Grid>
                <Grid item xs={12} md={12} marginTop={2}>
                    <Card sx={{padding:2}}  >
                        <Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Service</Typography>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(requestLog?.claim_method ?? '-')}</Typography>
                        </Stack>
                        {/* <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={{width:'35%', color: '#919EAB'}} gutterBottom>Benefit</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>
                                <ul>
                                    {requestLog?.benefit.length > 0 ? requestLog?.benefit.map((r, index) => (
                                    <li key={index}>{r.code } - {r.description}</li>
                                    )) : <li>-</li>}
                                </ul>
                            </Typography>
                        </Stack> */}
                    </Card>
                </Grid>
                {requestLog?.status == '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="outlined"
                            sx={{ color: '#19BBBB', borderColor: '#19BBBB' }}
                            onClick={() => {
                                setOpenDialogSubmit(true);
                                setApprove('approved');
                            }}
                            >
                            Approve
                            </Button>
                        </div>
                        </>
                        <DialogConfirmation
                            setOpenDialog={setOpenDialogSubmit}
                            requestLog={requestLog}
                            openDialog={openDialogSubmit}
                            approve={approve}
                            ></DialogConfirmation>
                        
                    </Stack>
                </Grid>
                ) : null}
                <Grid item xs={12} md={12}>
                    <Stack direction="row" padding={4} sx={{ justifyContent: 'space-between' }}>
                        <DialogEditInformation 
                                setOpenDialog={setOpenDialogEdit}
                                requestLog={requestLog}
                                openDialog={openDialogEdit}
                            >
                            </DialogEditInformation>
                    </Stack>
                </Grid>
                
            </Grid>
        </Container>
        </Page>
    );
}