import { IconButtonAnimate } from '@/components/animate';
import Iconify from '@/components/Iconify';
import MuiDialog from '@/components/MuiDialog';
import { Box, Tooltip } from '@mui/material';
import { Paper, Stack, Typography } from '@mui/material';
import { useState } from 'react';
import DialogDocumentRequest from './DialogDocumentRequest';

export default function Documents({ files }) {
  // --------------------------------------------------------------
  // Dialog Request Document
  const [openDialogRequestDocument, setOpenDialogRequestDocument] = useState(false);
  const [openDialogConfirmRequestDocument, setOpenDialogConfirmRequestDocument] = useState(false);

  function FileItem({ item }) {
    function fileCategory(type: string) {
      switch (type) {
        case 'claim-result':
          return 'Claim Result';
        case 'claim-diagnosis':
          return 'Claim Diagnosis';
        case 'claim-condition':
          return 'Claim Condition';
        default:
          return 'Other File';
      }
    }

    const documentTypes = [
      {
        type: 'result',
        name: 'Dokumen Hasil Penunjang',
      },
      {
        type: 'claim-diagnosis',
        name: 'Dokumen Diagnosa',
      },
      {
        type: 'claim-diagnosis',
        name: 'Dokumen Diagnosa',
      },
    ];

    return (
      <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ p: 1 }}>
        <Stack>
          <Typography variant="body2" fontWeight="600">
            {fileCategory(item.type)}
          </Typography>
          <Typography variant="body2">
            <a href={item.url} target="_blank">
              {item.name}
            </a>
          </Typography>
        </Stack>
        <Iconify icon="eva:arrow-ios-forward-fill"></Iconify>
      </Stack>
    );
  }

  return (
    <Paper variant="outlined" sx={{ background: '#f4f6f8', p: 2 }}>
      <Stack direction="row" justifyContent="space-between">
        <Typography variant="body2" fontWeight={600}>
          Dokumen Tambahan
        </Typography>
        <Typography
          variant="body2"
          onClick={() => {
            setOpenDialogRequestDocument(true);
          }}
        >
          + Request Document
        </Typography>
      </Stack>

      <Paper sx={{ background: 'white', marginTop: 2 }}>
        <Stack>
          <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{p: 2, paddingBottom: 1}}>
            <Typography fontWeight="bold">Dokumen Diagnosa</Typography>
            <Tooltip title="Request to upload this">
              <IconButtonAnimate color="primary" onClick={() => {}}>
              <Iconify icon="eva:bell-outline" width={20} height={20}></Iconify>
              {/* <Iconify icon="eva:done-all-fill" width={20} height={20} /> */}
              </IconButtonAnimate>
            </Tooltip>

            <MuiDialog
              title="Are you sure to request this document?"
              openDialog={openDialogConfirmRequestDocument}
              setOpenDialog={setOpenDialogConfirmRequestDocument}
              content={(
                <Typography variant="body2">kasjdnkajsdnkasdnaksjdnaksdjnkasdnkajsdn</Typography>
              )}
            />
          </Stack>
          <Stack sx={{px: 2}}>
            <Typography variant="body2">Dokumen Diagnosa</Typography>
          </Stack>
        </Stack>


        {files.length > 0 ? (
          <Stack sx={{ maxHeight: '250px', overflowY: 'scroll' }}>
            {files.map((file, index) => (
              <FileItem item={file} key={index}></FileItem>
            ))}
          </Stack>
        ) : (
          <Stack sx={{ p: 1 }}>
            <Typography>Belum ada dokumen</Typography>
          </Stack>
        )}
      </Paper>

      <DialogDocumentRequest
        setOpenDialog={setOpenDialogRequestDocument}
        openDialog={openDialogRequestDocument}
      ></DialogDocumentRequest>
    </Paper>
  );
}