/**
 * Form node config - draggable fields, types, required toggle
 */

import React from 'react';
import { FaGripVertical, FaTimes } from 'react-icons/fa';
import type { FormField, NodeConfigRendererProps } from './types';
import styles from '../Automation2FlowEditor.module.css';

export const FormNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => {
  const fields = (params.fields as FormField[]) ?? [];

  const moveField = (fromIndex: number, toIndex: number) => {
    if (fromIndex < 0 || toIndex < 0 || fromIndex >= fields.length || toIndex >= fields.length) return;
    const next = [...fields];
    const [removed] = next.splice(fromIndex, 1);
    next.splice(toIndex, 0, removed);
    updateParam('fields', next);
  };

  const removeField = (index: number) => {
    const next = fields.filter((_, i) => i !== index);
    updateParam('fields', next);
  };

  return (
    <div>
      <label>Felder</label>
      <div className={styles.formFieldsList}>
        {fields.map((f, i) => (
          <div
            key={i}
            className={styles.formFieldRow}
            onDragOver={(e) => {
              e.preventDefault();
              e.dataTransfer.dropEffect = 'move';
            }}
            onDrop={(e) => {
              e.preventDefault();
              const from = parseInt(e.dataTransfer.getData('text/plain'), 10);
              if (!Number.isNaN(from) && from !== i) moveField(from, i);
            }}
          >
            <div className={styles.formFieldRowHeader}>
              <span
                className={styles.formFieldDragHandle}
                title="Zum Verschieben ziehen"
                draggable
                onDragStart={(e) => {
                  e.dataTransfer.setData('text/plain', String(i));
                  e.dataTransfer.effectAllowed = 'move';
                }}
              >
                <FaGripVertical />
              </span>
              <div className={styles.formFieldInputs}>
                <input
                  placeholder="name"
                  value={f.name ?? ''}
                  onChange={(e) => {
                    const next = [...fields];
                    next[i] = { ...next[i], name: e.target.value };
                    updateParam('fields', next);
                  }}
                />
                <input
                  placeholder="label"
                  value={f.label ?? ''}
                  onChange={(e) => {
                    const next = [...fields];
                    next[i] = { ...next[i], label: e.target.value };
                    updateParam('fields', next);
                  }}
                />
              </div>
            </div>
            <div className={styles.formFieldRowFooter}>
              <select
                value={f.type ?? 'string'}
                onChange={(e) => {
                  const next = [...fields];
                  next[i] = { ...next[i], type: e.target.value };
                  updateParam('fields', next);
                }}
                style={{ width: 'auto', minWidth: 90 }}
              >
                <option value="string">Text</option>
                <option value="number">Number</option>
                <option value="date">Date</option>
                <option value="boolean">Checkbox</option>
              </select>
              <label className={styles.formFieldRequiredLabel}>
                <input
                  type="checkbox"
                  checked={f.required ?? false}
                  onChange={(e) => {
                    const next = [...fields];
                    next[i] = { ...next[i], required: e.target.checked };
                    updateParam('fields', next);
                  }}
                />
                Pflichtfeld
              </label>
              <button
                type="button"
                onClick={() => removeField(i)}
                title="Feld entfernen"
                className={styles.formFieldRemoveButton}
              >
                <FaTimes />
              </button>
            </div>
          </div>
        ))}
        <button
          type="button"
          onClick={() =>
            updateParam('fields', [...fields, { name: '', type: 'string', label: '', required: false }])
          }
        >
          + Feld
        </button>
      </div>
    </div>
  );
};