import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
import { PlatformTextField } from '../common/PlatformTextField';
import { EDITOR_GENERATED_ASSET_LABEL_MAX_CHARS } from './ImageCanvasGenerationSubmissionModel';

export const IMAGE_CANVAS_GENERATION_ASSET_NAME_MAX_LENGTH =
  EDITOR_GENERATED_ASSET_LABEL_MAX_CHARS;

type ImageCanvasGenerationAssetNameFieldProps = {
  value?: string | null;
  disabled?: boolean;
  onChange: (value: string) => void;
};

export function ImageCanvasGenerationAssetNameField({
  value,
  disabled = false,
  onChange,
}: ImageCanvasGenerationAssetNameFieldProps) {
  return (
    <label className="image-canvas-editor__generation-asset-name-field">
      <PlatformFieldLabel
        variant="form"
        className="image-canvas-editor__field-title"
      >
        资源名称
      </PlatformFieldLabel>
      <PlatformTextField
        aria-label="资源名称"
        value={value ?? ''}
        maxLength={IMAGE_CANVAS_GENERATION_ASSET_NAME_MAX_LENGTH}
        disabled={disabled}
        placeholder="例如：勇者立绘"
        size="sm"
        density="compact"
        className="image-canvas-editor__generation-asset-name-input"
        onChange={(event) =>
          onChange(
            Array.from(event.target.value)
              .slice(0, IMAGE_CANVAS_GENERATION_ASSET_NAME_MAX_LENGTH)
              .join(''),
          )
        }
      />
    </label>
  );
}