import React from 'react';
import { observer } from 'mobx-react-lite';
import { CustomActionModal } from '../ActionModal';
import { CmsFieldForm } from './CmsFieldForm';
import { FieldEditorModalState } from './FieldEditorModalState';
import { classes } from './CmsFieldModal.st.css.js';

export interface FieldEditorModalProps {
  state: FieldEditorModalState;
  /** Modal title. Required so callers pass a localized string. */
  title: string;
  /** Confirm button label (localized). */
  primaryButtonText: string;
  /** Cancel button label (localized). */
  secondaryButtonText: string;
  dataHook?: string;
  /** z-index of the modal overlay, forwarded to the underlying WDS `Modal`. */
  zIndex?: number;
}

/**
 * Pure field editor: the same form as `CmsFieldModal` but with no server side
 * effect. On Save it returns the edited field spec via `state.onSubmit` instead
 * of creating/updating a field through a schema. All button/title labels are
 * passed in (already translated) so the modal stays localized for the surface
 * that renders it.
 */
export const FieldEditorModal = observer(
  ({
    state,
    title,
    primaryButtonText,
    secondaryButtonText,
    dataHook = 'field-editor-modal',
    zIndex,
  }: FieldEditorModalProps) => {
    const { formState } = state;

    return (
      <CustomActionModal
        dataHook={dataHook}
        state={state.modal}
        zIndex={zIndex}
        onAfterClose={() => state.reset()}
        title={title}
        content={formState ? <CmsFieldForm state={formState} /> : null}
        primaryButtonText={primaryButtonText}
        secondaryButtonText={secondaryButtonText}
        width={600}
        showFooterDivider
        className={classes.modal}
      />
    );
  },
);