import type { IDomEditor, Toolbar } from '@wangeditor/core';
import type { SlateElement } from '@wangeditor/editor';
import { toolbar } from './config';

type ToolbarKey = (typeof toolbar)[number];

export interface EditorProps {
  placeholder?: string;
  disable?: boolean;
  defaultValue?: string;

  previewable?: boolean;

  uploadPicture?: EditorUploadProps<'image/*' | `image/${string}`>;
  uploadVideo?: EditorUploadProps<'video/*' | `video/${string}`>;

  toolbar?: Array<
    | ToolbarKey
    | '|'
    | {
        key: `group-${string}`;
        title: string;
        iconSvg: string;
        menuKeys: ToolbarKey[];
      }
  >;
}

export interface EditorEmits {
  created: [editor: IDomEditor];
  change: [editor: IDomEditor, content: { html: string; text: string }];
}

export type EditorInstance = IDomEditor;
export type ToolbarInstance = Toolbar;

export interface EditorUploadProps<Accept extends string = string> {
  accept: Accept;
  handle: EditorUploadHandle;
  onBeforeUpload?: (this: EditorInstance, file: File, props: Pick<EditorUploadProps, 'accept' | 'minFileSize' | 'maxFileSize'>) => void;
  maxFileSize?: number;
  minFileSize?: number;
}

export interface EditorUploadHandle {
  (file: File): Promise<{ url: string; name?: string; poster?: string }> & { onUpload(callback: (event: { loaded: number; total: number }) => void): () => void };
}

export type EditorImageElement = SlateElement & {
  src: string;
  alt: string;
  url?: string;
  href?: string;
};

export type EditorVideoElement = SlateElement & {
  src: string;
  poster?: string;
};
