import { Box } from '@mui/material'
import PdfItem from './PdfItem.tsx'
import { CurrentUserMark } from '../../types/mark.ts'
import { CurrentUserFile } from '../../types/file.ts'

interface PdfViewProps {
  files: CurrentUserFile[]
  currentUserMarks: CurrentUserMark[]
  handleMarkClick: (id: number) => void
  selectedMarkValue: string
  selectedMark: CurrentUserMark | null
}

/**
 * Responsible for rendering Pdf files.
 */
const PdfView = ({
  files,
  currentUserMarks,
  handleMarkClick,
  selectedMarkValue,
  selectedMark
}: PdfViewProps) => {
  const filterByFile = (
    currentUserMarks: CurrentUserMark[],
    hash: string
  ): CurrentUserMark[] => {
    return currentUserMarks.filter(
      (currentUserMark) => currentUserMark.mark.pdfFileHash === hash
    )
  }
  return (
    <Box sx={{ width: '100%' }}>
      {files.map(({ pdfFile, hash }, i) => {
        if (!hash) return
        return (
          <PdfItem
            pdfFile={pdfFile}
            key={i}
            currentUserMarks={filterByFile(currentUserMarks, hash)}
            selectedMark={selectedMark}
            handleMarkClick={handleMarkClick}
            selectedMarkValue={selectedMarkValue}
          />
        )
      })}
    </Box>
  )
}

export default PdfView