import PdfItem from './PdfItem.tsx'
import { CurrentUserMark, Mark } from '../../types/mark.ts'
import { CurrentUserFile } from '../../types/file.ts'
import { useEffect, useRef } from 'react'
import { FileDivider } from '../FileDivider.tsx'
import React from 'react'
import { LoadingSpinner } from '../LoadingSpinner/index.tsx'

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

/**
 * Responsible for rendering Pdf files.
 */
const PdfView = ({
  files,
  currentUserMarks,
  handleMarkClick,
  selectedMarkValue,
  selectedMark,
  currentFile,
  otherUserMarks
}: PdfViewProps) => {
  const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
  useEffect(() => {
    if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
      pdfRefs.current[currentFile.id]?.scrollIntoView({ behavior: 'smooth' })
    }
  }, [currentFile])
  const filterByFile = (
    currentUserMarks: CurrentUserMark[],
    hash: string
  ): CurrentUserMark[] => {
    return currentUserMarks.filter(
      (currentUserMark) => currentUserMark.mark.pdfFileHash === hash
    )
  }
  const filterMarksByFile = (marks: Mark[], hash: string): Mark[] => {
    return marks.filter((mark) => mark.pdfFileHash === hash)
  }
  const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
    index !== files.length - 1
  return (
    <div className="files-wrapper">
      {files.length > 0 ? (
        files.map((currentUserFile, index, arr) => {
          const { hash, file, id } = currentUserFile

          if (!hash) return
          return (
            <React.Fragment key={index}>
              <div
                id={file.name}
                className="file-wrapper"
                ref={(el) => (pdfRefs.current[id] = el)}
              >
                <PdfItem
                  file={file}
                  currentUserMarks={filterByFile(currentUserMarks, hash)}
                  selectedMark={selectedMark}
                  handleMarkClick={handleMarkClick}
                  selectedMarkValue={selectedMarkValue}
                  otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
                />
              </div>
              {isNotLastPdfFile(index, arr) && <FileDivider />}
            </React.Fragment>
          )
        })
      ) : (
        <LoadingSpinner variant="small" />
      )}
    </div>
  )
}

export default PdfView
