"use client"

import { memo, useSyncExternalStore } from "react"
import { DOCS_PAGE_GAP_PX } from "@/lib/drive/docs-page-layout-constants"
import {
  getDocsGraphicSnapGuideState,
  subscribeDocsGraphicSnapGuides,
} from "@/lib/drive/docs-graphic-snap-bridge"

function DocsGraphicSnapGuidesInner({
  pageWidth,
  pageHeight,
}: {
  pageWidth: number
  pageHeight: number
}) {
  const state = useSyncExternalStore(
    subscribeDocsGraphicSnapGuides,
    getDocsGraphicSnapGuideState,
    () => null
  )

  if (!state || state.guides.length === 0) return null

  const pageTop = state.pageIndex * (pageHeight + DOCS_PAGE_GAP_PX)

  return (
    <div
      className="pointer-events-none absolute left-0 top-0 z-[24]"
      style={{ width: pageWidth, height: pageTop + pageHeight }}
      aria-hidden
    >
      {state.guides.map((guide, index) =>
        guide.axis === "x" ? (
          <div
            key={`v-${guide.position}-${index}`}
            className="docs-graphic-snap-guide docs-graphic-snap-guide--vertical"
            style={{
              left: guide.position,
              top: pageTop,
              height: pageHeight,
            }}
          />
        ) : (
          <div
            key={`h-${guide.position}-${index}`}
            className="docs-graphic-snap-guide docs-graphic-snap-guide--horizontal"
            style={{
              top: pageTop + guide.position,
              left: 0,
              width: pageWidth,
            }}
          />
        )
      )}
    </div>
  )
}

export const DocsGraphicSnapGuides = memo(DocsGraphicSnapGuidesInner)