import FileUploadIcon from '@mui/icons-material/FileUpload'
import { Box, Typography } from '@mui/material'
import { DeleteButton } from '../IconButtons'
import { StyledUploadContainer, StyledUploadedFileContainer } from './Styles'

const FileUpload = ({ resource, handleFileInput, onDelete }) => {
  return (
    <Box>
      <Typography sx={{ opacity: '0.5', margin: '10px 0px' }}>
        Attachments
      </Typography>
      {resource ? (
        <FileRender resource={resource} handleDelete={onDelete} />
      ) : (
        <Box></Box>
      )}
      <StyledUploadContainer htmlFor="file">
        <FileUploadIcon />
        <Typography variant="subtitle2" sx={{ margin: '0px 10px' }}>
          Upload Files
        </Typography>
      </StyledUploadContainer>
      <input id="file" type="file" hidden multiple onChange={handleFileInput} />
    </Box>
  )
}

export default FileUpload

const FileRender = ({ resource, handleDelete }) => {
  return (
    <>
      {resource.length !== 0 &&
        resource.map((file) => {
          let extension = file?.name?.split('.')[1]
          return (
            <StyledUploadedFileContainer key={file.key}>
              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                {extension === 'pdf' ? (
                  <span>
                    <img src={'/images/pdf.png'} />
                  </span>
                ) : extension === 'pptx' ? (
                  <span>
                    <img src={'/images/ppt.png'} />
                  </span>
                ) : extension === 'txt' ? (
                  <span>
                    <img src={'/images/doc.png'} />
                  </span>
                ) : (
                  <span>
                    <img src={'/images/jpg.png'} />
                  </span>
                )}

                <Typography sx={{ margin: '0px 10px' }}>
                  {file.originalFileName}
                </Typography>
              </Box>
              {handleDelete && (
                <DeleteButton onClick={() => handleDelete(file.key)} />
              )}
            </StyledUploadedFileContainer>
          )
        })}
    </>
  )
}
