import React from 'react';
import CustomRichEditor from './CustomRichEditor';
import { uploadFile } from '../../services/articles';
import { assetUrl } from '../../utils/url';

interface RichTextEditorProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  height?: string;
  readOnly?: boolean;
  onImageUpload?: (file: File) => Promise<{ url: string }>;
  showImageResize?: boolean;
  toolbar?: 'full' | 'basic' | 'minimal' | string;
}

const RichTextEditor: React.FC<RichTextEditorProps> = ({
  value,
  onChange,
  placeholder = 'Začněte psát...',
  height = '400px',
  readOnly = false,
  onImageUpload = uploadFile,
  showImageResize = true,
  toolbar = 'full',
}) => {
  // Wrapper function to handle URL transformation
  const handleImageUpload = async (file: File) => {
    const res = await onImageUpload(file);
    // Transform URL if needed
    const url = assetUrl(res.url) || res.url;
    return { url };
  };

  return (
    <CustomRichEditor
      value={value}
      onChange={onChange}
      placeholder={placeholder}
      height={height}
      readOnly={readOnly}
      onImageUpload={handleImageUpload}
      showImageResize={showImageResize}
      toolbar={toolbar as 'full' | 'basic' | 'minimal'}
    />
  );
};

export default RichTextEditor;
