import { EQBand } from '../../studio/types';
import { useEQState } from './EQStateContext';
import { EQKey } from './useEQStateManagement';

const BAND_KEYS: EQKey[] = [
  'band1',
  'band2',
  'band3',
  'band4',
  'band5',
  'band6',
];

export default function BandSelector() {
  const eqState = useEQState();
  const selectedKey = eqState.selectedKey;

  return (
    <div className='-mx-2 flex flex-row items-center justify-between gap-2 border-b border-background-glass-thin px-2 pb-2 pl-3'>
      <div className='text-md'>Band</div>
      <div className='flex flex-row gap-1'>
        {BAND_KEYS.map((key, index) => {
          const bandValue = eqState.getBandValue(key) as EQBand;
          const isEnabled = bandValue.enabled;
          const isSelected = selectedKey === key;

          let buttonClass =
            'h-7 w-7 rounded-full flex items-center justify-center text-xs cursor-pointer transition-colors border';

          if (!isEnabled && isSelected) {
            // Off state
            buttonClass +=
              ' bg-background-glass-thick text-foreground-tertiary border-transparent hover:bg-background-glass-dense hover:text-foreground-primary';
          } else if (!isEnabled && !isSelected) {
            // Off state
            buttonClass +=
              ' bg-background-glass-thin text-background-glass-thick border-transparent hover:bg-background-glass-dense hover:text-foreground-primary';
          } else if (isSelected) {
            // On, selected state
            buttonClass += ' bg-accent-blue text-white border-accent-blue';
          } else {
            // On, not selected state
            buttonClass +=
              ' bg-background-glass-thin text-accent-blue border-accent-blue hover:bg-accent-blue/50 hover:text-foreground-primary';
          }

          return (
            <button
              key={key}
              className={buttonClass}
              onClick={() => {
                if (!isEnabled) {
                  // Toggling on also selects it
                  eqState.updateBandProperties(key, { enabled: true });
                } else if (isSelected) {
                  eqState.updateBandProperties(key, { enabled: false });
                }
                eqState.setSelectedKey(key);
              }}
            >
              {index + 1}
            </button>
          );
        })}
      </div>
    </div>
  );
}