import { SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/plugin-ui';
import { Alert, PopoverContent, Select } from '@grafana/ui';

import { VariableQueryType } from '../../types';
import { removeMarginBottom } from '../styles';

interface VariableQueryFieldProps<T> {
  onChange: (value: T) => void;
  options: SelectableValue[];
  value: T | null;
  label: string;
  inputId?: string;
  allowCustomValue?: boolean;
  isLoading?: boolean;
  tooltip?: PopoverContent;
  interactive?: boolean;
  error?: string;
}

export const VariableQueryField = <T extends string | VariableQueryType>({
  label,
  onChange,
  value,
  options,
  allowCustomValue = false,
  isLoading = false,
  inputId = label,
  tooltip,
  interactive,
  error,
}: VariableQueryFieldProps<T>) => {
  return (
    <>
      <EditorField
        label={label}
        tooltip={tooltip}
        tooltipInteractive={interactive}
        htmlFor={inputId}
        className={removeMarginBottom}
      >
        <Select
          aria-label={label}
          allowCustomValue={allowCustomValue}
          value={value}
          onChange={({ value }) => onChange(value!)}
          options={options}
          isLoading={isLoading}
          inputId={inputId}
        />
      </EditorField>
      {error && <Alert title={error} severity="error" topSpacing={1} />}
    </>
  );
};