import Animated, { useAnimatedStyle } from 'react-native-reanimated'
import { Card } from 'src/components/ui'
import { OrganizerAccountRowContent } from './OrganizerAccountRowContent'
import { useOrganizerDrag } from './organizerDrag'

// The floating drag preview. Rendered as the last child of the organizer body
// so it paints above both columns and the bottom glass bars, absolutely
// positioned over the whole screen with `pointerEvents="none"`. Only
// translate / scale / opacity are animated (via shared values); the account
// content is captured once at pickup (`draggedRow`) and never re-renders
// during the drag, so there's no per-frame React work.

const PREVIEW_WIDTH = 280

export function OrganizerDragPreview() {
  const { draggedRow, colorIndices, tx, ty, scale, opacity, containerX, containerY } =
    useOrganizerDrag()

  // tx/ty are screen-page coords; map them into the preview's local space
  // (its parent — the body — starts below the native header).
  const style = useAnimatedStyle(() => ({
    transform: [
      { translateX: tx.value - containerX.value },
      { translateY: ty.value - containerY.value },
      { scale: scale.value },
    ],
    opacity: opacity.value,
  }))

  // Nothing picked up yet this session: render nothing. After the first
  // pickup the node stays mounted and visibility is driven purely by opacity,
  // so the "snap-back fade" on a no-target release can play out.
  if (!draggedRow) return null

  return (
    <Animated.View
      pointerEvents="none"
      style={[{ position: 'absolute', left: 0, top: 0, width: PREVIEW_WIDTH }, style]}
    >
      <Card
        tone="secondary"
        shadowColor="$shadowColor"
        shadowOpacity={0.18}
        shadowRadius={16}
        shadowOffset={{ width: 0, height: 8 }}
      >
        <OrganizerAccountRowContent
          account={draggedRow.account}
          listIds={draggedRow.listIds}
          isMutual={draggedRow.isMutual}
          colorIndices={colorIndices}
        />
      </Card>
    </Animated.View>
  )
}
