import { Divider } from '@mui/material'
import PdfItem from './PdfItem.tsx'
import { CurrentUserMark } from '../../types/mark.ts'
import { CurrentUserFile } from '../../types/file.ts'
import { useEffect, useRef } from 'react'

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

/**
 * Responsible for rendering Pdf files.
 */
const PdfView = ({
  files,
  currentUserMarks,
  handleMarkClick,
  selectedMarkValue,
  selectedMark,
  currentFile
}: PdfViewProps) => {
  const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
  useEffect(() => {
    if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
      pdfRefs.current[currentFile.id]?.scrollIntoView({
        behavior: 'smooth',
        block: 'end'
      })
    }
  }, [currentFile])
  const filterByFile = (
    currentUserMarks: CurrentUserMark[],
    fileName: string
  ): CurrentUserMark[] => {
    return currentUserMarks.filter(
      (currentUserMark) => currentUserMark.mark.fileName === fileName
    )
  }
  const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
    index !== files.length - 1
  return (
    <>
      {files.map((currentUserFile, index, arr) => {
        const { hash, pdfFile, filename, id } = currentUserFile
        if (!hash) return
        return (
          <div
            id={pdfFile.file.name}
            ref={(el) => (pdfRefs.current[id] = el)}
            key={index}
          >
            <PdfItem
              pdfFile={pdfFile}
              currentUserMarks={filterByFile(currentUserMarks, filename)}
              selectedMark={selectedMark}
              handleMarkClick={handleMarkClick}
              selectedMarkValue={selectedMarkValue}
            />
            {isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
          </div>
        )
      })}
    </>
  )
}

export default PdfView