dsp-thomann-interface/src/pages/DspPage/DspPage.tsx

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

function DSPPage({ dsp, dsp408 }: { dsp: DSP; dsp408: DSP408Device }) {
  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 dsp408.recallPreset(presetIndex);
    if (success) {
      setSelectedPreset(presetIndex);
    }
    setPresetLoading(false);
  };

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

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

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

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

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

      case 'delay':
        return (
          <DelaySection
            dsp={dsp}
            setDelay={dsp408.setDelay}
            setDelayUnit={dsp408.setDelayUnit}
            setDSPState={dsp408.setDSPState}
          />
        );

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

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

      case 'geq':
        return (
          <GeqSection dsp={dsp} setGeqBand={dsp408.setGeqBand} setGeqBypass={dsp408.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={dsp408.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 DSPPage;