import React from 'react';
import type { RequestInputSource } from './requestInputUtils';
import { applyTemplateSuggestion, hasOpenTemplate } from './requestInputUtils';
import styles from './ActionInspector.module.css';

type Props = {
  value: string;
  sources: RequestInputSource[];
  onChange: (value: string) => void;
  testId: string;
};

export default function TemplateSuggestions({ value, sources, onChange, testId }: Props): React.ReactElement | null {
  if (!hasOpenTemplate(value) || sources.length === 0) return null;

  return (
    <div className={styles.templateSuggestions} data-testid={testId}>
      <span className={styles.templateSuggestionsLabel}>Insert reference</span>
      {sources.map((source) => (
        <button
          key={source.id}
          type="button"
          className={styles.templateSuggestion}
          onClick={() => onChange(applyTemplateSuggestion(value, source.template))}
        >
          <span>{source.label}</span>
          <code>{source.template}</code>
        </button>
      ))}
    </div>
  );
}