import React from 'react';
import { observer } from 'mobx-react-lite';
import { CustomFieldsWidgetState } from '../../state';
import { OnCustomFieldChange } from './OnCustomFieldChange';
import { CustomFieldsAllNamespacesForm } from './CustomFieldsAllNamespacesForm';
import { CustomFieldsEmptyStateOverrides } from './CustomFieldsEmptyStateOverrides';

export interface CustomFieldsWidgetContentProps {
  state: CustomFieldsWidgetState;
  emptyStateOverrides?: CustomFieldsEmptyStateOverrides;
  onChange?: OnCustomFieldChange;
}

const _CustomFieldsWidgetContent = ({
  state,
  onChange,
  emptyStateOverrides = {},
}: CustomFieldsWidgetContentProps) => {
  return (
    <CustomFieldsAllNamespacesForm
      state={state}
      onChange={onChange}
      emptyStateOverrides={emptyStateOverrides}
    />
  );
};

export const CustomFieldsWidgetContent = observer(_CustomFieldsWidgetContent);