import { AutomationTextInput, AutomationConnectionPicker } from '@dynatrace/automation-action-components';
import { FormField, Label } from '@dynatrace/strato-components-preview/forms';
import { ActionWidget } from '@dynatrace-sdk/automation-action-utils';
import React from 'react';

interface ActionNameInput {
  name: string;
  connectionId: string;
}

const ActionNameWidget: ActionWidget<ActionNameInput> = (props) => {
  const { value, onValueChanged } = props;

  const updateValue = (newValue: Partial<ActionNameInput>) => {
    onValueChanged({ ...value, ...newValue });
  };

  return (
    <>
      <FormField>
        <Label>Connection</Label>
        <AutomationConnectionPicker
          connectionId={value.connectionId}
          schema='action-name-connection'
          onChange={(connectionId) => updateValue({ connectionId })}
        />
      </FormField>
      <FormField>
        <Label>Name</Label>
        <AutomationTextInput value={value.name} onChange={(name) => updateValue({ name })} />
      </FormField>
    </>
  );
};

export default ActionNameWidget;