/**
 * FootswitchBar — the bottom bar of 8 footswitches with scribble strip LCDs.
 *
 * Renders the appropriate scribble data per mode (handled via FootswitchModeContext).
 * Each footswitch supports single-tap (primary action) and double-tap (secondary).
 */

import { useFootswitchMode } from '../FootswitchModeContext';
import { ScribbleStrip } from './ScribbleStrip';

export function FootswitchBar() {
  const { scribbleData, handleFootswitch, handleSecondary } = useFootswitchMode();

  return (
    <div className="footswitch-bar">
      {scribbleData.map((sd, i) => (
        <div key={sd.key} className="footswitch-slot">
          {/* Scribble strip LCD above the switch */}
          <ScribbleStrip
            data={sd}
            onPress={() => handleFootswitch(i)}
            onSecondary={() => handleSecondary(i)}
          />

          {/* Footswitch button */}
          <div
            className={`footswitch-btn ${sd.active ? 'footswitch-btn-active' : ''} ${sd.bypassed ? 'footswitch-btn-bypassed' : ''}`}
            onClick={() => handleFootswitch(i)}
            onContextMenu={(e) => { e.preventDefault(); handleSecondary(i); }}
            style={{
              '--fs-color': sd.color,
            } as React.CSSProperties}
          >
            <div className="footswitch-ring" />
            <div className="footswitch-cap" />
          </div>
        </div>
      ))}
    </div>
  );
}
