sigit.io/src/components/MarkFormField/index.tsx

import { CurrentUserMark } from '../../types/mark.ts'
import styles from './style.module.scss'

import { MARK_TYPE_TRANSLATION, NEXT, SIGN } from '../../utils/const.ts'
import {
  findNextIncompleteCurrentUserMark,
  isCurrentUserMarksComplete,
  isCurrentValueLast
} from '../../utils'

interface MarkFormFieldProps {
  handleSubmit: (event: any) => void
  handleSelectedMarkValueChange: (event: any) => void
  selectedMark: CurrentUserMark
  selectedMarkValue: string
  currentUserMarks: CurrentUserMark[]
  handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
}

/**
 * Responsible for rendering a form field connected to a mark and keeping track of its value.
 */
const MarkFormField = ({
  handleSubmit,
  handleSelectedMarkValueChange,
  selectedMark,
  selectedMarkValue,
  currentUserMarks,
  handleCurrentUserMarkChange
}: MarkFormFieldProps) => {
  const getSubmitButtonText = () => (isReadyToSign() ? SIGN : NEXT)
  const isReadyToSign = () =>
    isCurrentUserMarksComplete(currentUserMarks) ||
    isCurrentValueLast(currentUserMarks, selectedMark, selectedMarkValue)
  const isCurrent = (currentMark: CurrentUserMark) =>
    currentMark.id === selectedMark.id
  const isDone = (currentMark: CurrentUserMark) =>
    isCurrent(currentMark) ? !!selectedMarkValue : currentMark.isCompleted
  const findNext = () => {
    return (
      currentUserMarks[selectedMark.id] ||
      findNextIncompleteCurrentUserMark(currentUserMarks)
    )
  }
  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    console.log('handle form submit runs...')
    return isReadyToSign()
      ? handleSubmit(event)
      : handleCurrentUserMarkChange(findNext()!)
  }
  return (
    <div className={styles.container}>
      <div className={styles.trigger}>
        <button></button>
      </div>
      <div className={styles.actions}>
        <div className={styles.actionsWrapper}>
          <div className={styles.actionsTop}>
            <div className={styles.actionsTopInfo}>
              <p className={styles.actionsTopInfoText}>Add your signature</p>
            </div>
          </div>
          <div className={styles.inputWrapper}>
            <form onSubmit={(e) => handleFormSubmit(e)}>
              <input
                className={styles.input}
                placeholder={
                  MARK_TYPE_TRANSLATION[selectedMark.mark.type.valueOf()]
                }
                onChange={handleSelectedMarkValueChange}
                value={selectedMarkValue}
              />
              <div className={styles.actionsBottom}>
                <button type="submit" className={styles.submitButton}>
                  {getSubmitButtonText()}
                </button>
              </div>
            </form>
            <div className={styles.footerContainer}>
              <div className={styles.footer}>
                {currentUserMarks.map((mark, index) => {
                  return (
                    <div className={styles.pagination} key={index}>
                      <button
                        className={`${styles.paginationButton} ${isDone(mark) && styles.paginationButtonDone}`}
                        onClick={() => handleCurrentUserMarkChange(mark)}
                      >
                        {mark.id}
                      </button>
                      {isCurrent(mark) && (
                        <div className={styles.paginationButtonCurrent}></div>
                      )}
                    </div>
                  )
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default MarkFormField