import { watch } from 'vue'
import { useConnectionsStore } from '../stores/connections'
import { useSessionTreeStore } from '../stores/sessionTree'

export function useConnectionSync() {
  const connectionsStore = useConnectionsStore()
  const treeStore = useSessionTreeStore()

  // Watch for new connections
  watch(
    () => connectionsStore.connections.length,
    (newLength, oldLength) => {
      if (!treeStore.hydrated) return

      if (newLength > oldLength) {
        // New connection added
        treeStore.syncNewConnections()
      } else if (newLength < oldLength) {
        // Connection deleted
        treeStore.syncDeletedConnections()
      }
    }
  )

  // Watch for connection name changes
  watch(
    () => connectionsStore.connections.map(c => ({ id: c.id, name: c.name })),
    (newConnections, oldConnections) => {
      if (!treeStore.hydrated) return
      if (!oldConnections) return

      newConnections.forEach((newConn, index) => {
        const oldConn = oldConnections[index]
        if (oldConn && oldConn.id === newConn.id && oldConn.name !== newConn.name) {
          treeStore.syncConnectionName(newConn.id, newConn.name)
        }
      })
    },
    { deep: true }
  )
}