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

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

/**
 * Responsible for display an individual Pdf Mark.
 */
const PdfMarkItem = ({
  selectedMark,
  handleMarkClick,
  selectedMarkValue,
  userMark,
  pageWidth
}: 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
  const { from } = useScale()
  return (
    <div
      onClick={handleClick}
      className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
      style={{
        left: inPx(from(pageWidth, location.left)),
        top: inPx(from(pageWidth, location.top)),
        width: inPx(from(pageWidth, location.width)),
        height: inPx(from(pageWidth, location.height)),
        fontFamily: FONT_TYPE,
        fontSize: inPx(from(pageWidth, FONT_SIZE))
      }}
    >
      {getMarkValue()}
    </div>
  )
}

export default PdfMarkItem