import clsx from 'clsx';

import StudioKnob from '../../studio/StudioKnob';
import { EQBand } from '../../studio/types';
import { useEQState } from './EQStateContext';
import {
  MAX_FREQ,
  MAX_GAIN,
  MAX_Q,
  MIN_FREQ,
  MIN_GAIN,
  MIN_Q,
} from './eqConstants';

export default function BandKnobs() {
  const eqState = useEQState();
  const selectedKey = eqState.selectedKey;
  const band = eqState.getSelectedValue() as EQBand;

  // Determine if gain should be disabled (for filter types)
  const isFilterType =
    band.type === 'highpass' ||
    band.type === 'lowpass' ||
    band.type === 'notch';

  return (
    <div
      className={clsx(
        'flex flex-row items-center justify-around gap-4 pb-2 transition-opacity duration-200',
        !band.enabled && 'opacity-30'
      )}
    >
      <StudioKnob
        tooltipContent='Frequency'
        getValue={() => eqState.getNumericValues(selectedKey).frequency}
        min={MIN_FREQ}
        max={MAX_FREQ}
        anchorType='min'
        scale='logarithmic'
        onChange={(value) => {
          // Reactivate band if it's disabled
          if (!band.enabled) {
            eqState.updateBandProperties(selectedKey, { enabled: true });
          }
          eqState.updateNumericValuesRealtime(selectedKey, {
            frequency: value,
          });
        }}
        onCommit={() => eqState.commitNumericChanges(selectedKey)}
        formatValue={(value) => {
          if (value >= 1000) {
            return (value / 1000).toFixed(1) + 'kHz';
          }
          return value.toFixed(0) + 'Hz';
        }}
        parseValue={(str) => {
          const num = parseFloat(str);
          // If the input contains 'k', assume it's in kHz
          if (str.toLowerCase().includes('k')) {
            return num * 1000;
          }
          return num;
        }}
        label='Freq'
      />
      <StudioKnob
        tooltipContent={
          isFilterType ? 'Disabled for this band type' : undefined
        }
        getValue={() => eqState.getNumericValues(selectedKey).gain}
        min={MIN_GAIN}
        max={MAX_GAIN}
        anchorType='center'
        onChange={(value) => {
          // Reactivate band if it's disabled
          if (!band.enabled) {
            eqState.updateBandProperties(selectedKey, { enabled: true });
          }
          eqState.updateNumericValuesRealtime(selectedKey, { gain: value });
        }}
        onCommit={() => eqState.commitNumericChanges(selectedKey)}
        formatValue={(value) => value.toFixed(1) + 'dB'}
        parseValue={(str) => parseFloat(str)}
        label='Gain'
        disabled={isFilterType}
      />
      <StudioKnob
        tooltipContent={isFilterType ? 'Resonance' : 'Bandwidth'}
        defaultValue={0.707}
        getValue={() => eqState.getNumericValues(selectedKey).q}
        min={MIN_Q}
        max={MAX_Q}
        scale='logarithmic'
        anchorType='min'
        onChange={(value) => {
          // Reactivate band if it's disabled
          if (!band.enabled) {
            eqState.updateBandProperties(selectedKey, { enabled: true });
          }
          eqState.updateNumericValuesRealtime(selectedKey, { q: value });
        }}
        onCommit={() => eqState.commitNumericChanges(selectedKey)}
        formatValue={(value) => value.toFixed(2)}
        parseValue={(str) => parseFloat(str)}
        label={isFilterType ? 'Res' : 'Q'}
      />
    </div>
  );
}