/**
 * Loop node config - Datenquelle für Iteration mit benutzerfreundlichen Labels.
 * Z.B. für jedes Formularfeld, jede Datei aus Upload, jede E-Mail aus Suche.
 */

import React from 'react';
import type { NodeConfigRendererProps } from '../shared/types';
import { LoopItemsSelect } from '../shared/LoopItemsSelect';
import { createValue, isRef, isValue } from '../shared/dataRef';
import styles from '../../editor/Automation2FlowEditor.module.css';

export const LoopNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => {
  const value = params.items;
  const ref = isRef(value) ? value : null;
  const selectValue = ref ?? (isValue(value) ? value : null);

  const handleChange = (newRef: { type: 'ref'; nodeId: string; path: (string | number)[] } | null) => {
    updateParam('items', newRef ?? createValue([]));
  };

  return (
    <div className={styles.ifElseConditionEditor}>
      <LoopItemsSelect value={selectValue} onChange={handleChange} />
    </div>
  );
};