import { CurrentUserMark } from '../../types/mark.ts'
import styles from '../DrawPDFFields/style.module.scss'
import { FONT_TYPE, inPx } from '../../utils/pdf.ts'

interface PdfMarkItemProps {
  userMark: CurrentUserMark
  handleMarkClick: (id: number) => void
  selectedMarkValue: string
  selectedMark: CurrentUserMark | null
}

/**
 * Responsible for display an individual Pdf Mark.
 */
const PdfMarkItem = ({
  selectedMark,
  handleMarkClick,
  selectedMarkValue,
  userMark
}: PdfMarkItemProps) => {
  const { location } = userMark.mark
  const handleClick = () => handleMarkClick(userMark.mark.id)
  const isEdited = () => selectedMark?.mark.id === userMark.mark.id
  const getMarkValue = () =>
    isEdited() ? selectedMarkValue : userMark.currentValue
  return (
    <div
      onClick={handleClick}
      className={`${styles.drawingRectangle} ${isEdited() && styles.edited}`}
      style={{
        left: inPx(location.left),
        top: inPx(location.top),
        width: inPx(location.width),
        height: inPx(location.height),
        fontFamily: FONT_TYPE
      }}
    >
      {getMarkValue()}
    </div>
  )
}

export default PdfMarkItem