import { Box, Typography } from '@mui/material'
import { DeleteButton } from '../../IconButtons'
import { StyledUploadedFileContainer } from '../Styles'

export const FileRender = ({ state, setState, setValue }) => {
  const onDelete = (fileKey) => {
    setValue(
      'attachment',
      state.filter((item) => item.key !== fileKey),
    )
    setState((prev) => prev?.filter((item) => item.key !== fileKey))
  }

  return (
    <>
      {state?.map((file, index) => {
        let extension = file?.fileName?.split('.')[1]
        return (
          <StyledUploadedFileContainer key={index}>
            <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.fileName}
              </Typography>
            </Box>
            <DeleteButton
              onClick={() => {
                onDelete(file.key)
              }}
            />
          </StyledUploadedFileContainer>
        )
      })}
    </>
  )
}
