import { memo } from 'react'
import { GestureDetector } from 'react-native-gesture-handler'
import Animated from 'react-native-reanimated'
import type { Account } from 'src/lib/api-types'
import { OrganizerAccountRowContent } from './OrganizerAccountRowContent'
import { useRowGesture } from './organizerDrag'

// Interactive follow row: the visual content (OrganizerAccountRowContent)
// wrapped in the composed tap / long-press / pan gesture from `useRowGesture`.
// Memoised because it lives in a FlashList of potentially thousands of rows —
// it only re-renders when its account / membership / mutual inputs change.

type Props = {
  account: Account
  listIds: string[]
  isMutual: boolean
  colorIndices: Record<string, number>
}

function OrganizerAccountRowImpl({ account, listIds, isMutual, colorIndices }: Props) {
  const { gesture, rowRef } = useRowGesture({ account, listIds, isMutual })

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View ref={rowRef} collapsable={false} testID="organizer-account-row">
        <OrganizerAccountRowContent
          account={account}
          listIds={listIds}
          isMutual={isMutual}
          colorIndices={colorIndices}
          recycling
        />
      </Animated.View>
    </GestureDetector>
  )
}

export const OrganizerAccountRow = memo(OrganizerAccountRowImpl)
