aso/frontend/hospital-portal/src/components/dialogs/DialogDetailClaim.tsx

// @mui
import {
  Button,
  Box,
  Stepper,
  Step,
  StepLabel,
  Card,
  Typography,
  Divider,
  Stack,
  CircularProgress,
} from '@mui/material';
import { Add } from '@mui/icons-material';
// components
import MuiDialog from '../../components/MuiDialog';
// theme
import palette from '../../theme/palette';
// React
import { ReactElement, useEffect, useState } from 'react';
import { fDate } from '@/utils/formatTime';
import { addMinutes, format } from 'date-fns';
import { LoadingButton } from '@mui/lab';

type DataContent = {
  claim: object;
  isLoading: boolean;
  handleDownloadLog: void;
};

type MuiDialogProps = {
  title?: {
    name?: string;
    icon?: string;
  };
  openDialog: boolean;
  setOpenDialog: Function;
  content?: ReactElement;
  data?: DataContent[];
};

const steps = ['Review', 'Approval', 'Disbursement'];

const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
  const claim = data.claim ?? null;

  // ---------------------------------------------
  // Step
  const [currentStep, setCurrentStep] = useState(0);
  useEffect(
    function () {
      if (claim?.status == 'requested') {
        setCurrentStep(0);
      }
      if (claim?.status == 'approved') {
        setCurrentStep(1);
      }
      if (claim?.status == 'closed') {
        setCurrentStep(2);
      }
    },
    [data]
  );


  // ----------------------------------------------------
  // Download LOG
  const [loadingDownloadLog, setLoadingDownloadLog] = useState(false)
  const handleDownloadLog = async (claimRequest) => {
    setLoadingDownloadLog(true)
    await data.handleDownloadLog(claimRequest).then(() => {
      setLoadingDownloadLog(false)
    })
  }

  const getContent = () => (
    <>
      {data.isLoading && (
        <Stack alignItems="center" justifyContent="space-between" sx={{ p: 4 }}>
          <CircularProgress />
        </Stack>
      )}

      {!data.isLoading && (
        <>
          <Stack
            alignItems="center"
            justifyContent="space-between"
            direction="row"
            sx={{ marginTop: 1 }}
          >
            <Typography variant="subtitle1" sx={{ height: 'max-content' }}>
              Claim Request
            </Typography>
            <Stack>
              <Typography variant="caption">Submission date</Typography>
              {/* {JSON.stringify(data)} */}
              <Typography variant="caption">{claim && fDate(claim.created_at)}</Typography>
            </Stack>
          </Stack>
          <Box sx={{ width: '100%', marginTop: 2 }}>
            <Stepper alternativeLabel activeStep={currentStep ?? 0}>
              {steps.map((label) => (
                <Step key={label}>
                  <StepLabel>{label}</StepLabel>
                </Step>
              ))}
            </Stepper>
          </Box>

          { claim.status == 'approved' && (
          <Stack sx={{ marginTop: 4}}>
            <LoadingButton loading={loadingDownloadLog}
              variant="contained"
              startIcon={<Add />}
              fullWidth
              // sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
              onClick={() => {handleDownloadLog(claim)}}
            >
              Upload Invoice
            </LoadingButton>
          </Stack>)}

          <Stack marginTop={2}>
            <Typography variant="subtitle1" paddingY={2}>
              {fDate(claim.created_at)}
            </Typography>
          </Stack>
          <Stack direction="row" spacing={2}>
            <Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
            <Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
              
              {/* Download LOG */}
              {claim.status == 'approved' && (
                <Card sx={{ paddingY: 2, paddingX: 3 }}>
                  <Stack direction="row" justifyContent="space-between" alignItems="center">
                    <Typography variant="body1">
                    {format(
                      addMinutes(
                        new Date(claim.created_at),
                        15 //Math.floor(Math.random() * (20 - 15 + 1)) + 15
                      ),
                      'HH:mm'
                    )}{' '}
                     WIB</Typography>
                    <Typography
                      sx={{
                        backgroundColor: palette.light.warning.lighter,
                        color: palette.light.warning.dark,
                        borderColor: palette.light.warning.dark,
                        border: '1px solid',
                        borderRadius: '6px',
                        padding: 1,
                      }}
                      variant="caption"
                    >
                      Approved
                    </Typography>
                  </Stack>
                  <Divider sx={{ marginY: 2 }} />
                  <Stack>
                    <LoadingButton loading={loadingDownloadLog}
                      variant="outlined"
                      startIcon={<Add />}
                      fullWidth
                      // sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
                      onClick={() => {handleDownloadLog(claim)}}
                    >
                      Download Guarantee Letter
                    </LoadingButton>
                  </Stack>
                </Card>
              )}


              {/* Item 1 */}
              {claim.status == 'requested' && (
                <Card sx={{ paddingY: 2, paddingX: 3 }}>
                  <Stack direction="row" justifyContent="space-between" alignItems="center">
                    <Typography variant="body1">09:10 WIB</Typography>
                    <Typography
                      sx={{
                        backgroundColor: palette.light.warning.lighter,
                        color: palette.light.warning.dark,
                        borderColor: palette.light.warning.dark,
                        border: '1px solid',
                        borderRadius: '6px',
                        padding: 1,
                      }}
                      variant="caption"
                    >
                      Approval
                    </Typography>
                  </Stack>
                  <Divider sx={{ marginY: 2 }} />
                  <Stack>
                    <Typography variant="subtitle2" color="#404040">
                      Details : mohon melengkapi kekurangan dokumen
                    </Typography>
                    <Typography
                      variant="caption"
                      color="#757575"
                      sx={{ marginTop: 2, marginBottom: 1 }}
                    >
                      Lab pemeriksaan darah
                    </Typography>
                    <Button
                      variant="outlined"
                      startIcon={<Add />}
                      fullWidth
                      sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
                    >
                      Hasil Pemeriksaan Laboratorium
                    </Button>
                  </Stack>
                </Card>
              )}

              {/* Item 2 */}
              <Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
                <Stack direction="row" justifyContent="space-between" alignItems="center">
                  {/* // TODO sementara tanggal random */}
                  <Typography variant="body1">
                    {format(
                      addMinutes(
                        new Date(claim.created_at),
                        10// Math.floor(Math.random() * (15 - 5 + 1)) + 5
                      ),
                      'HH:mm'
                    )}{' '}
                    WIB
                  </Typography>
                  <Typography
                    sx={{
                      backgroundColor: palette.light.warning.lighter,
                      color: palette.light.warning.dark,
                      borderColor: palette.light.warning.dark,
                      border: '1px solid',
                      borderRadius: '6px',
                      padding: 1,
                    }}
                    variant="caption"
                  >
                    Approval
                  </Typography>
                </Stack>
                <Divider sx={{ marginY: 2 }} />
                <Stack>
                  <Typography variant="subtitle2" color="#404040">
                    Details : Penilaian Dokter
                  </Typography>
                </Stack>
              </Card>
              {/* Item 3 */}
              <Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
                <Stack direction="row" justifyContent="space-between" alignItems="center">
                  <Typography variant="body1">{fDate(claim.created_at, 'HH:mm')} WIB</Typography>
                  <Typography
                    sx={{
                      backgroundColor: '#F5F5F5',
                      color: '#757575',
                      borderColor: '#757575',
                      border: '1px solid',
                      borderRadius: '6px',
                      padding: 1,
                    }}
                    variant="caption"
                  >
                    Review
                  </Typography>
                </Stack>
                <Divider sx={{ marginY: 2 }} />
                <Stack>
                  <Typography variant="subtitle2" color="#404040">
                    Details : Klaim Diajukan
                  </Typography>
                </Stack>
              </Card>
            </Stack>
          </Stack>
        </>
      )}
    </>
  );

  return (
    <MuiDialog
      title={title}
      openDialog={openDialog}
      setOpenDialog={setOpenDialog}
      content={getContent()}
    />
  );
};

export default DialogDetailClaim;