// @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';
import { enqueueSnackbar } from 'notistack';
import Iconify from '../Iconify';

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]
  );

  // ----------------------------------------------------
  // Date Stamp
  let currentDate = null;

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

  // ----------------------------------------------------
  // Handle Upload Invoice
  const handleUploadInvoice = () => {
    enqueueSnackbar('Something went wrong, please contact Link Medis Sehat', { variant: 'error' });
  };

  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.created_at && 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={false}
                variant="contained"
                startIcon={<Add />}
                fullWidth
                // sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
                onClick={() => {handleUploadInvoice()}}
              >
                Upload Invoice
              </LoadingButton>
            </Stack>
          )} */}

          
          <Stack direction="row" spacing={2} sx={{ marginTop: 2 }}>
            <Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
            <Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
              {/* ---------------------------------TYPE INFO------------------------------------ */}
              <Card sx={{ paddingY: 2, paddingX: 3 }}>
                <Stack direction="row" justifyContent="space-between" alignItems="center">
                  <Typography variant="body1" fontWeight={600}>
                    <Iconify icon="eva:file-text-fill"></Iconify> Pengajuan Penjaminan
                  </Typography>
                </Stack>
                <Divider sx={{ marginY: 2 }} />

                <Stack>
                <LoadingButton loading={false}
                variant="contained"
                startIcon={<Add />}
                fullWidth
                // sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
                onClick={() => {}}
              >
                Upload Invoice
              </LoadingButton>
                </Stack>
              </Card>
            </Stack>
          </Stack>

          {claim.histories_by_date &&
            claim.histories_by_date.map((historiesByDate) => (
              <Stack key={historiesByDate.date}>
                <Stack marginTop={2}>
                  <Typography variant="subtitle1" paddingY={2}>
                    {fDate(historiesByDate.date)}
                  </Typography>
                </Stack>

                <Stack direction="row" spacing={2}>
                  <Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
                  <Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
                    {historiesByDate.histories &&
                      historiesByDate.histories.map((history) => (
                        <Stack key={history.id}>
                          {/* ---------------------------------TYPE INFO------------------------------------ */}
                          <Card sx={{ paddingY: 2, paddingX: 3 }}>
                            <Stack
                              direction="row"
                              justifyContent="space-between"
                              alignItems="center"
                            >
                              <Typography variant="body1">
                                {fDate(history.created_at, '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"
                              >
                                Request
                              </Typography>
                            </Stack>
                            <Divider sx={{ marginY: 2 }} />
                            <Stack>
                              <Typography variant="subtitle2" color="#404040">
                                {history.title}
                              </Typography>
                              <Typography
                                variant="caption"
                                color="#757575"
                                sx={{ marginTop: 2, marginBottom: 1 }}
                              >
                                {history.description}
                              </Typography>
                            </Stack>
                          </Card>
                        </Stack>
                      ))}
                  </Stack>
                </Stack>
              </Stack>
            ))}

          <Stack direction="row" spacing={2} sx={{ marginTop: 2 }}>
            <Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
            <Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
              {/* ---------------------------------TYPE INFO------------------------------------ */}
              <Card sx={{ paddingY: 2, paddingX: 3 }}>
                <Stack direction="row" justifyContent="space-between" alignItems="center">
                  <Typography variant="body1" fontWeight={600}>
                    <Iconify icon="eva:file-text-fill"></Iconify> Dokumen Kelengkapan
                  </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"
                  >
                    Dokumen
                  </Typography> */}
                </Stack>
                <Divider sx={{ marginY: 2 }} />

                <Typography fontWeight="600">Kondisi</Typography>
                <Stack>
                  <Stack
                    // divider={<Divider orientation="horizontal" flexItem />}
                    spacing={1}
                    sx={{ marginY: 2 }}
                  >
                    {claim.files_by_type?.claim_kondisi &&
                      claim.files_by_type.claim_kondisi.map((file, index) => (
                        <Stack direction="row" justifyContent={'space-between'} key={index}>
                          <a href={file.url} target="_blank" style={{ textDecoration: 'none' }}>
                            <Typography sx={{ color: 'text.secondary' }} variant="subtitle2">
                              - {file.name}
                            </Typography>
                          </a>
                        </Stack>
                      ))}
                  </Stack>

                  <Typography fontWeight="600">Diagnosa</Typography>
                  <Stack
                    // divider={<Divider orientation="horizontal" flexItem />}
                    spacing={1}
                    sx={{ marginY: 2 }}
                  >
                    {claim.files_by_type?.claim_diagnosis &&
                      claim.files_by_type.claim_diagnosis.map((file, index) => (
                        <Stack direction="row" justifyContent={'space-between'} key={index}>
                          <a href={file.url} target="_blank" style={{ textDecoration: 'none' }}>
                            <Typography sx={{ color: 'text.secondary' }} variant="subtitle2">
                              - {file.name}
                            </Typography>
                          </a>
                        </Stack>
                      ))}
                  </Stack>

                  <Typography fontWeight="600">Hasil</Typography>
                  <Stack
                    divider={<Divider orientation="horizontal" flexItem />}
                    spacing={1}
                    sx={{ marginY: 2 }}
                  >
                    {claim.files_by_type?.result &&
                      claim.files_by_type.result.map((file, index) => (
                        <Stack direction="row" justifyContent={'space-between'} key={index}>
                          <a href={file.url} target="_blank" style={{ textDecoration: 'none' }}>
                            <Typography sx={{ color: 'text.secondary' }} variant="subtitle2">
                              - {file.name}
                            </Typography>
                          </a>
                        </Stack>
                      ))}
                  </Stack>
                </Stack>
              </Card>
            </Stack>
          </Stack>
        </>
      )}
    </>
  );

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

export default DialogDetailClaim;