sigit.io/src/components/PDFView/PdfMarking.tsx

import { Box } from '@mui/material'
import styles from '../../pages/sign/style.module.scss'
import PdfView from './index.tsx'
import MarkFormField from '../../pages/sign/MarkFormField.tsx'
import { PdfFile } from '../../types/drawing.ts'
import { CurrentUserMark, Mark } from '../../types/mark.ts'
import React, { useState, useEffect } from 'react'
import {
  findNextCurrentUserMark,
  isCurrentUserMarksComplete,
  updateCurrentUserMarks,
} from '../../utils/mark.ts'

import { EMPTY } from '../../utils/const.ts'

interface PdfMarkingProps {
  files: { pdfFile: PdfFile, filename: string, hash: string | null }[],
  currentUserMarks: CurrentUserMark[],
  setIsReadyToSign: (isReadyToSign: boolean) => void,
  setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void,
  setUpdatedMarks: (markToUpdate: Mark) => void
}

/**
 * Top-level component responsible for displaying Pdfs, Pages, and Marks,
 * as well as tracking if the document is ready to be signed.
 * @param props
 * @constructor
 */
const PdfMarking = (props: PdfMarkingProps) => {
  const {
    files,
    currentUserMarks,
    setIsReadyToSign,
    setCurrentUserMarks,
    setUpdatedMarks
  } = props
  const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null)
  const [selectedMarkValue, setSelectedMarkValue] = useState<string>("")

  useEffect(() => {
    setSelectedMark(findNextCurrentUserMark(currentUserMarks) || null)
  }, [currentUserMarks])

  const handleMarkClick = (id: number) => {
    const nextMark = currentUserMarks.find((mark) => mark.mark.id === id);
    setSelectedMark(nextMark!);
    setSelectedMarkValue(nextMark?.mark.value ?? EMPTY);
  }

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!selectedMarkValue || !selectedMark) return;

    const updatedMark: CurrentUserMark = {
      ...selectedMark,
      mark: {
        ...selectedMark.mark,
        value: selectedMarkValue
      },
      isCompleted: true
    }

    setSelectedMarkValue(EMPTY)
    const updatedCurrentUserMarks = updateCurrentUserMarks(currentUserMarks, updatedMark);
    setCurrentUserMarks(updatedCurrentUserMarks)
    setSelectedMark(findNextCurrentUserMark(updatedCurrentUserMarks) || null)
    console.log(isCurrentUserMarksComplete(updatedCurrentUserMarks))
    setIsReadyToSign(isCurrentUserMarksComplete(updatedCurrentUserMarks))
    setUpdatedMarks(updatedMark.mark)
  }

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setSelectedMarkValue(event.target.value)

  return (
    <>
      <Box className={styles.container}>
        {
          currentUserMarks?.length > 0 && (
            <PdfView
              files={files}
              handleMarkClick={handleMarkClick}
              selectedMarkValue={selectedMarkValue}
              selectedMark={selectedMark}
              currentUserMarks={currentUserMarks}
            />)}
        {
          selectedMark !== null && (
            <MarkFormField
              handleSubmit={handleSubmit}
              handleChange={handleChange}
              selectedMark={selectedMark}
              selectedMarkValue={selectedMarkValue}
            />
          )}
      </Box>
    </>
  )
}

export default PdfMarking