import { FocalPoint } from "~/types/imagevault"
import "./focalPointPicker.css"
import useFocalPoint from "~/hooks/useFocalPoint"

export interface FocalPointPickerProps {
  focalPoint?: FocalPoint
  imageSrc: string
  onChange: (focalPoint: FocalPoint) => void
}

export default function FocalPointPicker({
  focalPoint,
  imageSrc,
  onChange,
}: FocalPointPickerProps) {
  const { ref, x, y, onMove, canMove, setCanMove } = useFocalPoint({
    focalPoint,
    onChange,
  })

  const imagesArray = Array.from({ length: 4 })

  return (
    <div className="container">
      <div className="focalPointWrapper" ref={ref} onMouseMove={onMove}>
        <button
          className="focalPointButton"
          style={{
            left: `${x}%`,
            top: `${y}%`,
            cursor: canMove ? "grabbing" : "grab",
          }}
          onMouseDown={() => setCanMove(true)}
          onMouseUp={() => setCanMove(false)}
        ></button>
        <img className="focalPointImage" src={imageSrc} alt="" />
      </div>
      <div className="examples">
        {imagesArray.map((_, idx) => (
          <img
            key={idx}
            src={imageSrc}
            alt=""
            style={{ objectPosition: `${x}% ${y}%` }}
          />
        ))}
      </div>
    </div>
  )
}