import { ILabels } from './labels.js';
import { ImageAttributes } from './text-editor.js';

type UploadResponse = ImageAttributes | string | undefined;

interface IToolbar {
  bold: string;
  italic: string;
  strike: string;
  underline: string;
  link: string;
  bulletList: string;
  orderedList: string;
  alignLeft: string;
  alignCenter: string;
  alignRight: string;
  alignJustify: string;
  blockquote: string;
  upload: string;
  color: string;
  codeBlock: string;
  inlineCode: string;
  table: string;
  youtube: string;
  undo: string;
  redo: string;
  mention: string;
}

declare enum EditorToolbarEnum {
  heading = 'heading',
  bold = 'bold',
  italic = 'italic',
  strike = 'strike',
  link = 'link',
  underline = 'underline',
  image = 'image',
  code = 'code',
  orderedList = 'orderedList',
  bulletList = 'bulletList',
  align = 'align',
  codeBlock = 'codeBlock',
  blockquote = 'blockquote',
  table = 'table',
  history = 'history',
  youtube = 'youtube',
  color = 'color',
  mention = 'mention',
  upload = 'upload'
}

type IEditorToolbar = `${EditorToolbarEnum}`;

type Icon = {
  src: string;
  size: number;
};

type ToolbarIcons = {
  [K in keyof IToolbar]?: Icon;
};

type ToolbarProps = {
  // editor: Editor;
  /**
   * override the default class
   */
  className?: string;
  /**
   * toolbar (each icon) to be displayed
   *
   * possible values are: [
   * "heading", "bold", "italic", "strike", "link", "underline", "image", "code",
   * "orderedList", "bulletList", "align", "codeBlock", "blockquote", "table",
   * "history", "youtube", "color", "mention"
   * ]
   *
   * @default all
   */
  toolbar?: IEditorToolbar[];
  /**
   * Custom labels for the toolbar
   */
  labels?: Omit<ILabels, 'editor'>;
  /**
   * upload file options
   * ex: file size, number of files, allowed mime types, api callback, etc
   */
  uploadFileOptions?: TextEditorProps['uploadFileOptions'];

  /**
   * Position of the toolbar
   * @default top
   */
  position?: 'top' | 'bottom';
  colorId?: string;
  /**
   * Type of the toolbar
   * if "floating", the toolbar will be displayed as a floating menu
   * if "bubble", the toolbar will be displayed as a bubble menu
   * if "toolbar", the toolbar will be displayed as a regular toolbar
   * @default "toolbar"
   */
  type?: 'toolbar' | 'floating' | 'bubble';
  /**
   * Custom icons for the toolbar
   * Specify the icon URL for each toolbar action
   * @example { bold: 'https://mydomain.com/my-bold-icon.svg' }
   */
  icons?: ToolbarIcons;
};

/**
 * Image upload options from drop or paste event
 * the image can be uploaded to the server via an API or saved inside as a base64 string
 */
type ImageUploadOptions = {
  /**
   * callback function to upload the image
   * it takes a file as an argument
   * it should return directly the uploaded image url (to be used as src)
   * or an object containing the uploaded image data (like url, id, alt, etc.)
   * it is used to upload the image to the server
   * @NOTE if not provided, the image will be uploaded as a base64 string and saved so
   * @param file
   * @returns
   */
  uploadFile?: (file: File) => Promise<UploadResponse>;
  /**
   * maximum size of the image in MB (each image)
   * @default 10mb
   */
  maxSize?: number;
  /**
   * maximum number of files to be uploaded at once
   * @default 5
   */
  maxFilesNumber?: number;
  /**
   * maximum width of the image
   * @default 1920
   */
  imageMaxWidth?: number;
  /**
   * maximum height of the image
   * @default 1080
   */
  imageMaxHeight?: number;
  /**
   * control which mime types are allowed to be uploaded (pasted or dropped)
   * @default all image mime types
   */
  allowedMimeTypes?: string[] | null;
  /**
   * type of the upload event
   */
  type: 'drop' | 'paste';

  /**
   * maximum character length of the image legend
   * @default 100
   */
  maxMediaLegendLength?: number;
};

export { EditorToolbarEnum };
export type { IEditorToolbar, IToolbar, Icon, ImageUploadOptions, ToolbarIcons, ToolbarProps, UploadResponse };