import Iconify from '@/components/Iconify';
import { Paper, Stack, Typography } from '@mui/material';
import { useState } from 'react';

export default function Documents({ files }) {
  // --------------------------------------------------------------
  // Dialog Request Document
  const [openDialogRequestDocument, setOpenDialogRequestDocument] = 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';
        }
    }

    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 }}>
        { 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 History Perawatan</Typography>
          </Stack>
        )}
      </Paper>
    </Paper>
  );
}
