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

import PdfView from './index.tsx'
import MarkFormField from '../MarkFormField'
import { PdfFile } from '../../types/drawing.ts'
import { CurrentUserMark, Mark } from '../../types/mark.ts'
import React, { useState, useEffect } from 'react'
import {
  findNextIncompleteCurrentUserMark,
  getUpdatedMark,
  isCurrentUserMarksComplete,
  updateCurrentUserMarks
} from '../../utils'
import { EMPTY } from '../../utils/const.ts'
import { Container } from '../Container'
import styles from '../../pages/sign/style.module.scss'

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(findNextIncompleteCurrentUserMark(currentUserMarks) || null)
  }, [])

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

  const handleCurrentUserMarkChange = (mark: CurrentUserMark) => {
    if (!selectedMark) return
    const updatedSelectedMark: CurrentUserMark = getUpdatedMark(
      selectedMark,
      selectedMarkValue
    )

    const updatedCurrentUserMarks = updateCurrentUserMarks(
      currentUserMarks,
      updatedSelectedMark
    )
    setCurrentUserMarks(updatedCurrentUserMarks)
    setSelectedMark(mark)
    setSelectedMarkValue(mark.currentValue ?? EMPTY)
  }

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

    const updatedMark: CurrentUserMark = getUpdatedMark(
      selectedMark,
      selectedMarkValue
    )

    setSelectedMarkValue(EMPTY)
    const updatedCurrentUserMarks = updateCurrentUserMarks(
      currentUserMarks,
      updatedMark
    )
    setCurrentUserMarks(updatedCurrentUserMarks)
    setSelectedMark(null)
    setIsReadyToSign(true)
    setUpdatedMarks(updatedMark.mark)
  }

  // const updateCurrentUserMarkValues = () => {
  //   const updatedMark: CurrentUserMark = getUpdatedMark(selectedMark!, selectedMarkValue)
  //   const updatedCurrentUserMarks = updateCurrentUserMarks(currentUserMarks, updatedMark)
  //   setSelectedMarkValue(EMPTY)
  //   setCurrentUserMarks(updatedCurrentUserMarks)
  // }

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

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

export default PdfMarking