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

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

//selectedMark represents the mark that the user is actively editing
// selectedMarkValue representsnthe edited value
// userMark is part of the overall currentUserMark array

const PdfMarkItem = ({ selectedMark, handleMarkClick, selectedMarkValue, userMark }: PdfMarkItemProps) => {
  const { location } = userMark.mark;
  const handleClick = () => handleMarkClick(userMark.mark.id);
  const getMarkValue = () => (
    selectedMark?.mark.id === userMark.mark.id
      ? selectedMarkValue
      : userMark.mark.value
  )
  return (
    <div
      onClick={handleClick}
      className={styles.drawingRectangle}
      style={{
        left: inPx(location.left),
        top: inPx(location.top),
        width: inPx(location.width),
        height: inPx(location.height)
      }}
    >{getMarkValue()}</div>
  )
}

export default PdfMarkItem