// @mui
import {
  Button,
  Box,
  Stepper,
  Step,
  StepLabel,
  Card,
  Typography,
  Divider,
  Stack,
} from '@mui/material';
import { Add } from '@mui/icons-material';
// components
import MuiDialog from '../../components/MuiDialog';
// theme
import palette from '../../theme/palette';
// React
import { ReactElement } from 'react';

type DataContent = {
  info: string;
  date: string;
  time: string;
};

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 getContent = () => (
    <>
      <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>
          <Typography variant="caption">15 / 05 / 2022</Typography>
        </Stack>
      </Stack>
      <Box sx={{ width: '100%', marginTop: 2 }}>
        <Stepper alternativeLabel>
          {steps.map((label) => (
            <Step key={label}>
              <StepLabel>{label}</StepLabel>
            </Step>
          ))}
        </Stepper>
      </Box>
      <Stack marginTop={2}>
        <Typography variant="subtitle1" paddingY={2}>
          17 Mei 2022
        </Typography>
      </Stack>
      <Stack direction="row" spacing={2}>
        <Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
        <Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
          {/* Item 1 */}
          <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">
              <Typography variant="body1">09:00 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">08:00 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;