/**
 * ModeSelector — mode switch buttons shown in the status bar.
 * Lets the user cycle between Stomp, Preset, Snapshot, and Combo modes.
 */

import { useFootswitchMode } from '../FootswitchModeContext';
import type { FootswitchMode } from '../types';
import { FOOTSWITCH_MODE_LABELS } from '../types';

const MODES: FootswitchMode[] = ['stomp', 'preset', 'snapshot', 'combo'];
const MODE_ICONS: Record<FootswitchMode, string> = {
  stomp: '◉',
  preset: '☆',
  snapshot: '◆',
  combo: '◈',
  transport: '▶',
};

interface ModeSelectorProps {
  collapsed?: boolean;
}

export function ModeSelector({ collapsed = false }: ModeSelectorProps) {
  const { mode, setMode } = useFootswitchMode();

  if (collapsed) {
    // Compact: just a single click target that cycles
    const nextIdx = (MODES.indexOf(mode) + 1) % MODES.length;
    return (
      <div
        className="mode-selector mode-selector-collapsed"
        onClick={() => setMode(MODES[nextIdx])}
        title={`Mode: ${FOOTSWITCH_MODE_LABELS[mode]} — tap to switch`}
      >
        <span className="mode-icon">{MODE_ICONS[mode]}</span>
        <span className="mode-label">{FOOTSWITCH_MODE_LABELS[mode]}</span>
      </div>
    );
  }

  return (
    <div className="mode-selector">
      {MODES.map(m => (
        <button
          key={m}
          className={`mode-btn ${mode === m ? 'mode-btn-active' : ''}`}
          onClick={() => setMode(m)}
          title={FOOTSWITCH_MODE_LABELS[m]}
        >
          <span className="mode-btn-icon">{MODE_ICONS[m]}</span>
          <span className="mode-btn-label">{FOOTSWITCH_MODE_LABELS[m]}</span>
        </button>
      ))}
    </div>
  );
}
