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

interface PdfMarkItemProps {
  mark: Mark
  handleMarkClick: (id: number) => void
  isEditable: boolean
  currentMarkValue: string
  currentUserMark: CurrentUserMark | null
}

const PdfMarkItem = ({ mark, handleMarkClick, isEditable, currentMarkValue, currentUserMark }: PdfMarkItemProps) => {
  const handleClick = () => isEditable && handleMarkClick(mark.id);
  const getMarkValue = () => (
    currentUserMark?.mark.id === mark.id
      ? currentMarkValue
      : mark.value
  )
  return (
    <div
      onClick={handleClick}
      className={`${styles.drawingRectangle} ${isEditable ? '' : styles.nonEditable}`}
      style={{
        left: inPx(mark.location.left),
        top: inPx(mark.location.top),
        width: inPx(mark.location.width),
        height: inPx(mark.location.height)
      }}
    >{getMarkValue()}</div>
  )
}

export default PdfMarkItem