dsp-thomann-interface/src/features/dsp408/components/DSP408Panel/DSP408Panel.tsx

import { useState } from 'react';
import { DSP } from '../../../../types';
import Sidebar from '../../../../components/Sidebar/Sidebar';
import { InfoIcon, KnobGainIcon, TextIcon } from '../../../../assets/icons/AudioIcons';
import ConnectionPanel from '../ConnectionSection/ConnectionSection';
import GainSection from '../GainSection/GainSection';
import CompressorSection from '../CompressorSection/CompressorSection';
import GateSection from '../GateSection/GateSection';
import LimiterSection from '../LimiterSection/LimiterSection';
import DelaySection from '../DelaySection/DelaySection';
import LoadingOverlay from '../../../../components/LoadingOverlay/LoadingOverlay';
import { InputChannel, OutputChannel } from '../../types';
import MatrixSection from '../Matrixsection/Matrixsection';
import GeqSection from '../GeqSection/GeqSection';
import InputSection from '../InputSection/InputSection';
import { DSP408Api } from '../../dsp408';
import './DSP408Panel.css';

type DSP408 = Extract<DSP, { type: 'DSP408' }>;

function DSP408Panel({ dsp, api }: { dsp: DSP408; api: DSP408Api }) {
  const [activeSidebar, setActiveSidebar] = useState('overview');
  const [sidebarExpanded, setSidebarExpanded] = useState(false);
  const [selectedPreset, setSelectedPreset] = useState(dsp.state?.presets.current_index ?? 0);
  const [presetLoading, setPresetLoading] = useState(false);
  const inputStates = dsp.state?.current_config.input_states;
  const outputStates = dsp.state?.current_config.output_states;

  const sidebarItems = [
    { id: 'overview', label: 'Overview', icon: <InfoIcon /> },
    { id: 'gain', label: 'Gain', icon: <KnobGainIcon /> },
    { id: 'gate', label: 'Gate', icon: <KnobGainIcon /> },
    { id: 'compressor', label: 'Compressor', icon: <KnobGainIcon /> },
    { id: 'limiter', label: 'Limiter', icon: <KnobGainIcon /> },
    { id: 'delay', label: 'Delay', icon: <KnobGainIcon /> },
    { id: 'matrix', label: 'Matrix', icon: <KnobGainIcon /> },
    { id: 'geq', label: 'Graphic Equalizer', icon: <KnobGainIcon /> },
    { id: 'ina', label: `${inputStates[InputChannel.InA].name}`, icon: <TextIcon>In A</TextIcon> },
    { id: 'inb', label: `${inputStates[InputChannel.InB].name}`, icon: <TextIcon>In B</TextIcon> },
    { id: 'inc', label: `${inputStates[InputChannel.InC].name}`, icon: <TextIcon>In C</TextIcon> },
    { id: 'ind', label: `${inputStates[InputChannel.InD].name}`, icon: <TextIcon>In D</TextIcon> },
    {
      id: 'out1',
      label: `${outputStates[OutputChannel.Out1].name}`,
      icon: <TextIcon>Out 1</TextIcon>,
    },
    {
      id: 'out2',
      label: `${outputStates[OutputChannel.Out2].name}`,
      icon: <TextIcon>Out 2</TextIcon>,
    },
    {
      id: 'out3',
      label: `${outputStates[OutputChannel.Out3].name}`,
      icon: <TextIcon>Out 3</TextIcon>,
    },
    {
      id: 'out4',
      label: `${outputStates[OutputChannel.Out4].name}`,
      icon: <TextIcon>Out 4</TextIcon>,
    },
    {
      id: 'out5',
      label: `${outputStates[OutputChannel.Out5].name}`,
      icon: <TextIcon>Out 5</TextIcon>,
    },
    {
      id: 'out6',
      label: `${outputStates[OutputChannel.Out6].name}`,
      icon: <TextIcon>Out 6</TextIcon>,
    },
    {
      id: 'out7',
      label: `${outputStates[OutputChannel.Out7].name}`,
      icon: <TextIcon>Out 7</TextIcon>,
    },
    {
      id: 'out8',
      label: `${outputStates[OutputChannel.Out8].name}`,
      icon: <TextIcon>Out 8</TextIcon>,
    },
    { id: 'miscellaneous', label: 'Miscellaneous', icon: <TextIcon>Out 1</TextIcon> },
  ];

  const presets = dsp.state?.presets.names
    ? [
        { id: 'f00', name: 'Factory Preset' },
        ...dsp.state.presets.names.map((name, index) => ({
          id: `u${String(index + 1).padStart(2, '0')}`,
          name,
        })),
      ]
    : [
        { id: 'f00', name: 'Factory Preset' },
        ...Array.from({ length: 20 }, (_, index) => ({
          id: `u${String(index + 1).padStart(2, '0')}`,
          name: 'Default Preset',
        })),
      ];

  const onAppChange = async (id: string) => {
    const presetIndex = presets.findIndex((preset) => preset.id === id);
    if (presetIndex === -1) return;

    setPresetLoading(true);
    const success = await api.recallPreset(presetIndex);
    if (success) setSelectedPreset(presetIndex);
    setPresetLoading(false);
  };

  const renderTab = () => {
    switch (activeSidebar) {
      case 'overview':
        return <ConnectionPanel dsp={dsp} onConnect={api.connect} onDisconnect={api.disconnect} />;

      case 'gain':
        return (
          <GainSection
            dsp={dsp}
            setGain={api.setGain}
            setMute={api.setMute}
            setInverse={api.setInverse}
          />
        );

      case 'gate':
        return <GateSection dsp={dsp} set_gate={api.setGate} />;

      case 'compressor':
        return <CompressorSection dsp={dsp} set_compressor={api.setCompressor} />;

      case 'limiter':
        return <LimiterSection dsp={dsp} set_limiter={api.setLimiter} />;

      case 'delay':
        return <DelaySection dsp={dsp} setDelay={api.setDelay} setDelayUnit={api.setDelayUnit} />;

      case 'ina':
        return (
          <InputSection
            dsp={dsp}
            channel={InputChannel.InA}
            set_low_pass={api.setLowPass}
            set_high_pass={api.setHighPass}
            setPeq={api.setPeqBand}
            setGain={api.setGain}
            setMute={api.setMute}
            setInverse={api.setInverse}
          />
        );

      case 'matrix':
        return (
          <MatrixSection
            dsp={dsp}
            setMatrixRouting={api.setMatrixRouting}
            setMatrixGain={api.setMatrixGain}
          />
        );

      case 'geq':
        return <GeqSection dsp={dsp} setGeqBand={api.setGeqBand} setGeqBypass={api.setGeqBypass} />;

      default:
        return null;
    }
  };

  return (
    <div className={`app-root ${sidebarExpanded ? 'app-root--sidebar-expanded' : ''}`}>
      <Sidebar
        items={sidebarItems}
        activeId={activeSidebar}
        onSelect={setActiveSidebar}
        appName={dsp.name}
        appOptions={presets}
        selectedAppId={presets[selectedPreset]?.id}
        onAppChange={onAppChange}
        onAppRename={api.setCurrentPresetName}
        expanded={sidebarExpanded}
        onToggle={() => setSidebarExpanded((v) => !v)}
      />

      <LoadingOverlay
        active={presetLoading}
        label="Recalling preset…"
        overlayClassName="dsp-loading-overlay"
      >
        <div className="dsp-content">{renderTab()}</div>
      </LoadingOverlay>
    </div>
  );
}

export default DSP408Panel;