import styles from '../DrawPDFFields/style.module.scss'
import { PdfPage } from '../../types/drawing.ts'
import { CurrentUserMark, Mark, MarkConfigDetails } from '../../types/mark.ts'
import PdfMarkItem from './PdfMarkItem.tsx'
import { useSelector } from 'react-redux'
import { State } from '../../store/rootReducer.ts'
import { hexToNpub } from '../../utils'
interface PdfPageProps {
  page: PdfPage
  marks: Mark[]
  handleMarkClick: (id: number) => void
  currentMarkValue: string
  currentUserMark: CurrentUserMark | null
}

const PdfPageItem = ({ page, marks, handleMarkClick, currentMarkValue, currentUserMark }: PdfPageProps) => {
  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
  const isEditable = (mark: Mark): boolean => {
    if (!usersPubkey) return false;
    return mark.npub === hexToNpub(usersPubkey);
  }
  return (
    <div
      className={styles.pdfImageWrapper}
      style={{
        border: '1px solid #c4c4c4',
        marginBottom: '10px',
        marginTop: '10px'
      }}
    >
      <img
        draggable="false"
        src={page.image}
        style={{ width: '100%'}}

      />
      {
        marks.map((mark, i) => (
          <PdfMarkItem
            key={i}
            mark={mark}
            isEditable={isEditable(mark)}
            handleMarkClick={handleMarkClick}
            currentMarkValue={currentMarkValue}
            currentUserMark={currentUserMark}
        />
      ))}
    </div>
  )
}

export default PdfPageItem