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'
import { forwardRef } from 'react'
import { npubToHex } from '../../utils/nostr.ts'

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

/**
 * Responsible for display an individual Pdf Mark.
 */
const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
  (
    { selectedMark, handleMarkClick, selectedMarkValue, userMark, pageWidth },
    ref
  ) => {
    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
        ref={ref}
        onClick={handleClick}
        className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
        style={{
          backgroundColor: selectedMark?.mark.npub
            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
            : undefined,
          outlineColor: selectedMark?.mark.npub
            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}`
            : undefined,
          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
