import { ImportConfig, ImportState, ModalState } from '@wix/bex-core';
import { ReactNode } from 'react';

type ImportButtonToolbarType = 'default' | 'bulkActionToolbar';

/**
 * Renders the "create/edit field" modal. The element is a self-contained editor
 * that watches `state.editingHeader` to open, pre-fill, and close itself, and
 * writes the result back via the state's `applyFieldEdit` /
 * `applyDataExtensionFieldEdit`. `ImportButton` picks and lazy-loads the right
 * one from the destination by default; pass this only to override.
 */
export type RenderImportFieldEditor = (args: {
  state: ImportState;
}) => ReactNode;

export interface ImportButtonParams {
  /**
   * The import inputs, as a plain object. Omit it entirely to import into the
   * table's own collection (Wix Data) — the collection, its fields, and
   * create-new-field are read from the table's source. Set `destination` (and
   * any `fields`) to write to a platformized target instead.
   */
  config?: ImportConfig;
  /**
   * Overrides the create/edit-field modal (see {@link RenderImportFieldEditor}).
   * By default the editor is chosen from the destination (CMS vs DataExtension)
   * and loaded on demand, so this need not be passed.
   */
  renderFieldEditor?: RenderImportFieldEditor;
}

export type ImportButtonProps = ImportButtonParams & {
  /**
   * Which button variant to render. `'default'` (the default) shows a
   * `ResponsiveButton`; `'bulkActionToolbar'` shows a compact secondary
   * `Button`.
   */
  toolbarType?: ImportButtonToolbarType;
};

export type ImportModalProps = ImportButtonParams;

export type ImportButtonModalLayoutProps = ImportModalProps & {
  importModalState: ModalState;
};