export interface Module {
    /**
     * @description Module name
     */
    name: string;
    
    /**
     * @description Constructor, It will run automatically.
     * @param core Core object 
     * @example core.addModule([dialog, component, resizing, fileManager])
     */
    add?: (core: SunEditor) => void;
}

/**
 * @description This is a required module of dialog plugin.
 */
declare interface dialog extends Module {
    /**
     * @description Open a Dialog plugin
     * @param kind Dialog plugin name
     * @param update Whether it will open for update ('image' === this.currentControllerName)
     * @example this.plugins.dialog.open.call(this, 'image', 'image' === this.currentControllerName);
     */
    open(kind: string, update: boolean): void;

    /**
     * @description Close a Dialog plugin
     * The plugin's "init" method is called.
     * @example this.plugins.dialog.close.call(this);
     */
    close(): void;
}

/**
 * @description These are functions that can be used in the "component" module.
 */
declare interface component extends Module {
    /**
     * @description Create a container for the resizing component and insert the element.
     * @param cover Cover element (FIGURE)
     * @param className Class name of container (fixed: se-component)
     * @returns Created container element
     */
    set_container(cover: Element, className: string): Element;

    /**
     * @description Cover the target element with a FIGURE element.
     * @param element Target element
     */
    set_cover(element: Element): void;
    
    /**
     * @description Return HTML string of caption(FIGCAPTION) element
     * @returns
     */
    create_caption(): string;
}

/**
 * @description Require context properties when fileManager module
    _infoList: [],
    _infoIndex: 0,
    _uploadFileLength: 0
*/
declare interface fileManager extends Module {
    /**
     * @description Upload the file to the server.
     * @param  uploadUrl Upload server url
     * @param  uploadHeader Request header
     * @param  formData FormData in body
     * @param  callBack Success call back function
     * @param  errorCallBack Error call back function
     * @example this.plugins.fileManager.upload.call(this, imageUploadUrl, this.options.imageUploadHeader, formData, this.plugins.image.callBack_imgUpload.bind(this, info), this.functions.onImageUploadError);
     */
    upload(uploadUrl: string, uploadHeader: Record<string, string> | null, formData: FormData, callBack: Function | null, errorCallBack: Function | null): void;

    /**
     * @description Checke the file's information and modify the tag that does not fit the format.
     * @param  pluginName Plugin name
     * @param  tagNames Tag array to check
     * @param  uploadEventHandler Event handler to process updated file info after checking (used in "setInfo")
     * @param  modifyHandler A function to modify a tag that does not fit the format (Argument value: Tag element)
     * @param  resizing True if the plugin is using a resizing module
     * @example 
     * const modifyHandler = function (tag) {
     *      imagePlugin.onModifyMode.call(this, tag, null);
     *      imagePlugin.openModify.call(this, true);
     *      imagePlugin.update_image.call(this, true, false, true);
     *  }.bind(this);
     *  this.plugins.fileManager.checkInfo.call(this, 'image', ['img'], this.functions.onImageUpload, modifyHandler, true);
     */
    checkInfo(pluginName: string, tagNames: string[], uploadEventHandler: Function | null, modifyHandler: Function | null, resizing: boolean): void;

    /**
     * @description Create info object of file and add it to "_infoList" (this.context[pluginName]._infoList[])
     * @param  pluginName Plugin name 
     * @param  element 
     * @param  uploadEventHandler Event handler to process updated file info (created in setInfo)
     * @param  file 
     * @param  resizing True if the plugin is using a resizing module
     * @example 
     * uploadCallBack {.. file = { name: fileList[i].name, size: fileList[i].size };
     * this.plugins.fileManager.setInfo.call(this, 'image', oImg, this.functions.onImageUpload, file, true);
     */
    setInfo(pluginName: string, element, uploadEventHandler: Function | null, file:Record<string, string|number> | null, resizing: boolean): void;

    /**
     * @description Delete info object at "_infoList"
     * @param  pluginName Plugin name 
     * @param  index index of info object (this.context[pluginName]._infoList[].index)
     * @param  uploadEventHandler Event handler to process updated file info (created in setInfo)
     */
    deleteInfo(pluginName: string, index, uploadEventHandler: Function | null): void;

    /**
     * @description Reset info object and "_infoList = []", "_infoIndex = 0"
     * @param  pluginName Plugin name 
     * @param  uploadEventHandler Event handler to process updated file info (created in setInfo)
     */
    resetInfo(pluginName: string, uploadEventHandler: Function | null): void;
}

/**
 * @description Require context properties when resizing module
    inputX: Element,
    inputY: Element,
    _container: null,
    _cover: null,
    _element: null,
    _element_w: 1,
    _element_h: 1,
    _element_l: 0,
    _element_t: 0,
    _defaultSizeX: 'auto',
    _defaultSizeY: 'auto',
    _origin_w: core.options.imageWidth === 'auto' ? '' : core.options.imageWidth,
    _origin_h: core.options.imageHeight === 'auto' ? '' : core.options.imageHeight,
    _proportionChecked: true,
    // -- select function --
    _resizing: core.options.imageResizing,
    _resizeDotHide: !core.options.imageHeightShow,
    _rotation: core.options.imageRotation,
    _onlyPercentage: core.options.imageSizeOnlyPercentage,
    _ratio: false,
    _ratioX: 1,
    _ratioY: 1
    _captionShow: true,
    // -- when used caption (_captionShow: true) --
    _caption: null,
    _captionChecked: false,
    captionCheckEl: null
*/
declare interface resizing extends Module {
    /**
     * @description Gets the width size
     * @param contextPlugin context object of plugin (core.context[plugin])
     * @param element Target element [default: "this.plugin[plugin]._element"]
     * @param cover Cover element (FIGURE) [default: "this.plugin[plugin]._cover"]
     * @param container Container element (DIV.se-component) [default: "this.plugin[plugin]._container"]
     * @returns
     */
    _module_getSizeX(contextPlugin: Object, element: Element, cover: Element, container: Element): string;
    
    /**
     * @description Gets the height size
     * @param contextPlugin context object of plugin (core.context[plugin])
     * @param element Target element [default: "this.plugin[plugin]._element"]
     * @param cover Cover element (FIGURE) [default: "this.plugin[plugin]._cover"]
     * @param container Container element (DIV.se-component) [default: "this.plugin[plugin]._container"]
     * @returns
     */
    _module_getSizeY(contextPlugin: Object, element: Element, cover: Element, container: Element): string;

    /**
     * @description Called at the "openModify" to put the size of the current target into the size input element.
     * @param contextPlugin context object of plugin (core.context[plugin])
     * @param pluginObj Plugin object
     */
    _module_setModifyInputSize(contextPlugin: Object, pluginObj: Object): void;
    
    /**
     * @description It is called in "setInputSize" (input tag keyupEvent), 
     * checks the value entered in the input tag, 
     * calculates the ratio, and sets the calculated value in the input tag of the opposite size.
     * @param contextPlugin context object of plugin (core.context[plugin])
     * @param xy 'x': width, 'y': height
     */
    _module_setInputSize(contextPlugin: Object, xy: string): void;
    
    /**
     * @description It is called in "setRatio" (input and proportionCheck tags changeEvent), 
     * checks the value of the input tag, calculates the ratio, and resets it in the input tag.
     * @param contextPlugin context object of plugin (core.context[plugin])
     */
    _module_setRatio(contextPlugin: Object): void;
    
    /**
     * @description Revert size of element to origin size (plugin._origin_w, plugin._origin_h)
     * @param contextPlugin context object of plugin (core.context[plugin])
     */
    _module_sizeRevert(contextPlugin: Object): void;

    /**
     * @description Save the size data (element.setAttribute("data-size"))
     * Used at the "setSize" method
     * @param contextPlugin context object of plugin (core.context[plugin])
     */
    _module_saveCurrentSize(contextPlugin: Object): void;

    /**
     * @description Call the resizing module
     * @param targetElement Resizing target element
     * @param plugin Plugin name
     * @returns Size of resizing div {w, h, t, l}
     */
    call_controller_resize(targetElement: Element, plugin: string): Record<string, number>;

    /**
     * @description Open align submenu of module
     */
    openAlignMenu(): void;

    /**
     * @description Click event of resizing toolbar
     * Performs the action of the clicked toolbar button.
     * @param e Event object
     */
    onClick_resizeButton(e: MouseEvent): void;

    /**
     * @description Initialize the transform style (rotation) of the element.
     * @param element Target element
     */
    resetTransform(element: Element): void;

    /**
     * @description Set the transform style (rotation) of the element.
     * @param element Target element
     * @param width Element's width size
     * @param height Element's height size
     */
    setTransformSize(element: Element, width?: number, height?:number): void;

    /**
     * @description The position of the caption is set automatically.
     * @param element Target element (not caption element)
     */
    setCaptionPosition(element: Element): void;

    /**
     * @description Mouse down event of resize handles
     * @param e Event object 
     */
    onMouseDown_resize_handle(e: MouseEvent): void;

    /**
     * @description Mouse move event after call "onMouseDown_resize_handle" of resize handles
     * The size of the module's "div" is adjusted according to the mouse move event.
     * @param contextResizing "core.context.resizing" object (binding argument)
     * @param direction Direction ("tl", "tr", "bl", "br", "lw", "th", "rw", "bh") (binding argument)
     * @param plugin "core.context[currentPlugin]" object (binding argument)
     * @param e Event object
     */
    resizing_element(contextResizing: Object, direction: string, plugin: Object, e: MouseEvent): void;

    /**
     * @description Resize the element to the size of the "div" adjusted in the "resizing_element" method.
     * Called at the mouse-up event registered in "onMouseDown_resize_handle".
     * @param direction Direction ("tl", "tr", "bl", "br", "lw", "th", "rw", "bh")
     */
    cancel_controller_resize(direction: string): void;
}

/**
 * @description This is a required module of fileBrowser plugin.
    Require context properties when using fileBrowser module:
    title(@Required): "File browser window title",
    url(@Required): "File server url",
    listClass(@Required): "Class name of list div",
    itemTemplateHandler(@Required): "Function that defines the HTML of an file item",
    selectorHandler(@Required): "Function that action when item click",
    columnSize(@Option): "Number of "div.se-file-item-column" to be created (default: 4)"
*/
declare interface fileBrowser extends Module {
    /**
     * @description Open a file browser window
     * @param pluginName Plugin name using the file browser
     * @param selectorHandler When the function comes as an argument value, it substitutes "context.selectorHandler".
     * @example this.plugins.fileBrowser.open.call(this, 'imageGallery', (selectorHandler || null));
     */
    open(kind: string, update: boolean): void;

    /**
     * @description Define the HTML of the item to be put in "div.se-file-item-column".
     * @param item Item of the response data's array
     */
    drawItems: (item: object) => string;

    /**
     * @description Close a file browser window
     * The plugin's "init" method is called.
     * @example this.plugins.fileBrowser.close.call(this);
     */
    close(): void;

    /**
     * @description This method is called when the file browser window is closed.
     * Initialize the properties.
     */
    init?: () => void;
}