import { useRef } from "react";
import type { Signal } from "./model";

import styles from "./ClockTimeline.module.css";
import SelectSignal from "../Selector/SelectSignal";

interface SignalEditorListProps {
  signals: Signal[];
  placeholder?: string;
  onAdd: (signal: Signal | null) => void;
  onUpdate: (index: number, signal: Signal | null) => void;
  onRemove: (index: number) => void;
  onReorder: (sourceIdx: number, targetIdx: number) => void;
}

export default function SignalEditorList({
  signals,
  placeholder,
  onAdd,
  onUpdate,
  onRemove,
  onReorder,
}: SignalEditorListProps) {
  const draggedSignalIdx = useRef<number | null>(null);

  return (
    <div className={styles.signalList}>
      {signals.map((s, i) => (
        <span
          key={`${s.name}-${i}`}
          className={styles.signalChip}
          draggable={signals.length > 1}
          onDragStart={(e) => {
            draggedSignalIdx.current = i;
            e.dataTransfer.effectAllowed = "move";
          }}
          onDragOver={(e) => {
            e.preventDefault();
            e.dataTransfer.dropEffect = "move";
          }}
          onDrop={(e) => {
            e.preventDefault();
            const sourceIdx = draggedSignalIdx.current;
            if (sourceIdx !== null && sourceIdx !== i) {
              onReorder(sourceIdx, i);
            }
            draggedSignalIdx.current = null;
          }}
          onDragEnd={() => {
            draggedSignalIdx.current = null;
          }}
        >
          <SelectSignal value={s.name} onSelectSignal={(_, sig) => onUpdate(i, sig)} />
          {signals.length > 1 && (
            <button className={"button " + styles.signalRemove} onClick={() => onRemove(i)}>
              ✕
            </button>
          )}
        </span>
      ))}
      <SelectSignal
        placeholder={placeholder}
        className={styles.signalEmpty}
        key={signals.length}
        onSelectSignal={(_, sig) => onAdd(sig)}
      />
    </div>
  );
}