musicland/src/components/SongStructureDragDrop.js

import { View, Text, ScrollView, StyleSheet, Dimensions, TouchableOpacity } from 'react-native'
import React, { useEffect, useMemo, useState } from 'react'
import Animated, {
  runOnJS,
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated'
import { PanGestureHandler } from 'react-native-gesture-handler'

const { width } = Dimensions.get('window')

// Child component to respect Rules of Hooks (no hooks in loops)
const DraggableItem = ({
  item,
  gestureHandler,
  draggingItem,
  translateX,
  translateY,
  onActivate,
}) => {
  const style = useAnimatedStyle(() => ({
    transform: [
      { translateX: draggingItem.value === item.id ? translateX.value : 0 },
      { translateY: draggingItem.value === item.id ? translateY.value : 0 },
    ],
    zIndex: draggingItem.value === item.id ? 10 : 0,
  }))

  return (
    <PanGestureHandler
      onGestureEvent={gestureHandler}
      onHandlerStateChange={() => onActivate(item.id)}
    >
      <Animated.View style={[styles.item, style]}>
        <Text style={styles.text}>{item.label ?? String(item)}</Text>
      </Animated.View>
    </PanGestureHandler>
  )
}

// Props:
// - sourceItems: array of { id, label, value } or strings
// - initialSelected: array of ids to prefill right side (optional)
// - onChange: callback with array of values (or strings) in right order
const SongStructureDragDrop = ({ sourceItems, initialSelected, onChange }) => {
  const normalize = (arr = []) =>
    arr.map((item, idx) =>
      typeof item === 'string' ? { id: `${item}-${idx}`, label: item, value: item } : item
    )

  const normalizedSource = useMemo(() => normalize(sourceItems || []), [sourceItems])

  const [rightItems, setRightItems] = useState([])

  // Compare arrays by item id and order to avoid unnecessary state churn
  const sameById = (a = [], b = []) => {
    if (a === b) return true
    if (!a || !b) return false
    if (a.length !== b.length) return false
    for (let idx = 0; idx < a.length; idx++) {
      if (a[idx]?.id !== b[idx]?.id) return false
    }
    return true
  }

  useEffect(() => {
    const selected = Array.isArray(initialSelected) ? initialSelected : []
    const selectedSet = new Set(selected)
    const nextRight = normalizedSource.filter((i) => selectedSet.has(i.id))
    setRightItems((prev) => (sameById(prev, nextRight) ? prev : nextRight))
  }, [normalizedSource, initialSelected])

  const leftItems = useMemo(() => {
    if (!rightItems || rightItems.length === 0) return normalizedSource
    const rightIds = new Set(rightItems.map((item) => item.id))
    return normalizedSource.filter((item) => !rightIds.has(item.id))
  }, [normalizedSource, rightItems])

  const draggingItem = useSharedValue(null)
  const translateX = useSharedValue(0)
  const translateY = useSharedValue(0)

  const onActivate = (id) => {
    draggingItem.value = id
  }

  const moveItem = (itemId) => {
    const item = normalizedSource.find((i) => i.id === itemId)
    if (!item) return
    setRightItems((current) => {
      if (current.some((i) => i.id === itemId)) return current
      const next = [...current, item]
      onChange?.(next.map((i) => i.value ?? i.label))
      return next
    })
  }

  const removeItem = (itemId) => {
    setRightItems((current) => {
      if (!current.some((i) => i.id === itemId)) return current
      const next = current.filter((i) => i.id !== itemId)
      onChange?.(next.map((i) => i.value ?? i.label))
      return next
    })
  }

  const gestureHandler = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.startX = translateX.value
      ctx.startY = translateY.value
    },
    onActive: (event, ctx) => {
      translateX.value = ctx.startX + event.translationX
      translateY.value = ctx.startY + event.translationY
    },
    onEnd: () => {
      if (translateX.value > width / 2) {
        runOnJS(moveItem)(draggingItem.value)
      }
      translateX.value = withSpring(0)
      translateY.value = withSpring(0)
      draggingItem.value = null
    },
  })

  return (
    <View style={styles.scrollWrapper}>
      <ScrollView style={{ ...styles.scroll, zIndex: 2 }}>
        <Text style={styles.title}>Left</Text>
        {leftItems.map((item) => (
          <DraggableItem
            key={item.id}
            item={item}
            gestureHandler={gestureHandler}
            draggingItem={draggingItem}
            translateX={translateX}
            translateY={translateY}
            onActivate={onActivate}
          />
        ))}
      </ScrollView>

      <ScrollView style={{ ...styles.scroll, zIndex: -1 }}>
        <Text style={styles.title}>Right</Text>
        <Text style={styles.helpText}>Appuyez pour retirer un élément</Text>
        {rightItems.map((item) => (
          <TouchableOpacity
            key={item.id}
            style={styles.selectedItem}
            onPress={() => removeItem(item.id)}
            activeOpacity={0.7}
            accessibilityRole="button"
            accessibilityLabel={`Retirer ${item.label ?? String(item)}`}
          >
            <Text style={styles.text}>{item.label ?? String(item)}</Text>
            <Text style={styles.removeHint}>Retirer</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  )
}

export default SongStructureDragDrop

const styles = StyleSheet.create({
  scrollWrapper: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  scroll: {
    width: width / 2.2,
    height: '90%',
    backgroundColor: '#f0f0f0',
    borderRadius: 10,
    margin: 5,
    padding: 10,
  },
  title: {
    fontWeight: 'bold',
    fontSize: 16,
    marginBottom: 10,
  },
  item: {
    backgroundColor: '#aaf',
    padding: 15,
    marginVertical: 5,
    borderRadius: 10,
  },
  selectedItem: {
    backgroundColor: '#bdf',
    padding: 15,
    marginVertical: 5,
    borderRadius: 10,
    alignItems: 'center',
  },
  helpText: {
    fontSize: 12,
    color: '#666',
    marginBottom: 8,
    textAlign: 'center',
  },
  removeHint: {
    fontSize: 12,
    color: '#555',
    marginTop: 4,
  },
  text: {
    color: '#333',
    textAlign: 'center',
  },
})