import React from 'react';
import { audioEngineTargets } from '../../../settings.mjs';
import { SelectInput } from './SelectInput';

// Allows the user to select an audio interface for Strudel to play through
export function AudioEngineTargetSelector({ target, onChange, isDisabled }) {
  const onTargetChange = (target) => {
    onChange(target);
  };
  const options = new Map([
    [audioEngineTargets.webaudio, audioEngineTargets.webaudio],
    [audioEngineTargets.osc, audioEngineTargets.osc],
  ]);
  return (
    <div className=" flex flex-col gap-1">
      <SelectInput isDisabled={isDisabled} options={options} value={target} onChange={onTargetChange} />
      {target === audioEngineTargets.osc && (
        <div>
          <p className="text-sm italic">
            ⚠ All events routed to OSC, audio is silenced! See{' '}
            <a className="text-blue-500" href="https://strudel.cc/learn/input-output/">
              Docs
            </a>
          </p>
        </div>
      )}
    </div>
  );
}