import { useCallback, useState } from 'react';
import * as React from 'react';

import { t } from '@grafana/i18n';
import { Input } from '@grafana/ui';

import { type AzureQueryEditorFieldProps } from '../../types/types';
import { Field } from '../shared/Field';

import { setLegendAlias } from './setQueryValue';

const LegendFormatField = ({ onQueryChange, query }: AzureQueryEditorFieldProps) => {
  const [value, setValue] = useState<string>(query.azureMonitor?.alias ?? '');

  // As calling onQueryChange initiates a the datasource refresh, we only want to call it once
  // the field loses focus
  const handleChange = useCallback((ev: React.FormEvent) => {
    if (ev.target instanceof HTMLInputElement) {
      setValue(ev.target.value);
    }
  }, []);

  const handleBlur = useCallback(() => {
    const newQuery = setLegendAlias(query, value);
    onQueryChange(newQuery);
  }, [onQueryChange, query, value]);

  return (
    <Field label={t('components.legend-format-field.label-legend-format', 'Legend format')}>
      <Input
        id="azure-monitor-metrics-legend-field"
        placeholder={t('components.legend-format-field.placeholder-legend-format', 'Alias patterns')}
        value={value}
        onChange={handleChange}
        onBlur={handleBlur}
        width={38}
      />
    </Field>
  );
};

export default LegendFormatField;
