Genarrative/src/components/image-editor/ImageCanvasEditGenerationModalView.tsx

import { type Dispatch, type SetStateAction } from 'react';

import { UnifiedModal } from '../common/UnifiedModal';
import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
import type { GenerateDialogState } from './ImageCanvasEditorTypes';
import { calculateEditorImageGenerationPrice } from './ImageCanvasGenerationModel';

type ImageCanvasEditGenerationModalViewProps = {
  dialog: GenerateDialogState | null;
  setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
  onSubmit: (dialog: GenerateDialogState) => void;
};

export function ImageCanvasEditGenerationModalView({
  dialog,
  setGenerateDialog,
  onSubmit,
}: ImageCanvasEditGenerationModalViewProps) {
  const isOpen = dialog?.mode === 'edit' && dialog.status !== 'generating';
  const dialogImageModel = dialog?.imageModel ?? 'gpt-image-2';
  const dialogImageSize = dialog?.imageSize ?? '1K';
  const editPrice = calculateEditorImageGenerationPrice({
    kind: 'quick-edit',
    model: dialogImageModel,
    imageSize: dialogImageSize,
  });

  // TODO: Remove this override after full dark style support.
  return (
    <UnifiedModal
      open={isOpen}
      title={dialog?.mode === 'edit' ? '修改图片' : '生成图片'}
      size="sm"
      portalTheme="light"
      closeLabel={dialog?.mode === 'edit' ? '关闭修改图片' : '关闭生成图片'}
      closeDisabled={dialog?.status === 'generating'}
      onClose={() => setGenerateDialog(null)}
      panelClassName="image-canvas-editor__generate-dialog"
      bodyClassName="image-canvas-editor__generate-dialog-body"
    >
      {dialog?.mode === 'edit' ? (
        <ImageCanvasBasicGenerationComposerView
          dialog={{
            ...dialog,
            mode: 'edit',
            imageModel: dialogImageModel,
            aspectRatio: dialog.aspectRatio ?? '1:1',
            imageSize: dialogImageSize,
            generationReferences: [],
          }}
          style={{}}
          setGenerateDialog={setGenerateDialog}
          onRequestUpload={() => {}}
          onSubmit={onSubmit}
          dialogLabel="修改图片"
          includeDimensions={false}
          includeModel={false}
          includeReferences={false}
          promptPlaceholder="描述你想如何修改这张图片"
          submitLabel="修改"
          submitAriaLabel={`修改${editPrice}泥点`}
          submittingStatusLabel="修改中"
          panelClassName="image-canvas-editor__generate-form"
          footerClassName="image-canvas-editor__generate-body"
          promptClassName="image-canvas-editor__generate-prompt"
          submitButtonClassName="image-canvas-editor__generate-submit"
        />
      ) : null}
    </UnifiedModal>
  );
}