import * as React from 'react';

import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/plugin-ui';
import { Input, InlineField } from '@grafana/ui';

import { ElasticsearchOptions } from '../types';

type Props = {
  value: ElasticsearchOptions;
  onChange: (value: ElasticsearchOptions) => void;
};
export const LogsConfig = (props: Props) => {
  const { value, onChange } = props;
  const changeHandler =
    (key: keyof ElasticsearchOptions) => (event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>) => {
      onChange({
        ...value,
        [key]: event.currentTarget.value,
      });
    };

  return (
    <ConfigSubSection
      title="Logs"
      description={
        <ConfigDescriptionLink
          description="Configure which fields the data source uses for log messages and log levels."
          suffix="elasticsearch/#logs"
          feature="Elasticsearch log fields"
        />
      }
    >
      <InlineField
        label="Message field name"
        labelWidth={22}
        tooltip="Configure the field to be used for log messages."
      >
        <Input
          id="es_logs-config_logMessageField"
          value={value.logMessageField}
          onChange={changeHandler('logMessageField')}
          placeholder="_source"
          width={24}
        />
      </InlineField>

      <InlineField
        label="Level field name"
        labelWidth={22}
        tooltip="Configure the field that determines the level of each log message."
      >
        <Input
          id="es_logs-config_logLevelField"
          value={value.logLevelField}
          onChange={changeHandler('logLevelField')}
          width={24}
        />
      </InlineField>
    </ConfigSubSection>
  );
};