/**
 * @description tooltip 事件
 * @author lichunlin
 */

import $, { DomElement } from '../../../utils/dom-core'
import Tooltip, { TooltipConfType } from '../../menu-constructors/Tooltip'
import Editor from '../../../editor/index'

/**
 * 生成一个图片指定大小的拖拽框
 * @param editor 编辑器实例
 * @param $textContainerElem 编辑框对象
 */
function createDragBox(editor: Editor, $textContainerElem: DomElement): DomElement {
    
    const $drag = $(
        `<div class="w-modalbox">
            <div class="modalbox-dialog">
                <div class="modalbox-haeder">
                    <h2 class="modalbox-title">设置视频尺寸</h2>
                    <a href="#close" title="关闭" class="modalbox-close-btn">X</a>
                </div>
                
                <div class="modalbox-cons">
                    <p>宽度：<input class="basic-slide" type="text" id="width" />px</p>
                    <p>高度：<input class="basic-slide" type="text" id="height" />px</p>
                </div>

                <div class="modalbox-foot">
                    <button class="button button2">确定</button>
                </div>
            </div>
        </div>
        
        `
    )
    $drag.hide()
    $textContainerElem.append($drag)
    return $drag
}



/**
 * 生成 Tooltip 的显示隐藏函数
 */
function createShowHideFn(editor: Editor) {
    let tooltip: Tooltip | null
    const t = (text: string, prefix: string = ''): string => {
        return editor.i18next.t(prefix + text)
    }
    const $textContainerElem = editor.$textContainerElem
    const $drag = createDragBox(editor, $textContainerElem)

    /**
     * 显示 tooltip
     * @param $node 链接元素
     */
    function showImgTooltip($node: DomElement) {
      
        const conf: TooltipConfType = [
            {
                $elem: $("<span class='w-e-icon-trash-o'></span>"),
                onClick: (editor: Editor, $node: DomElement) => {
                    // 选中img元素
                    editor.selection.createRangeByElem($node)
                    editor.selection.restoreSelection()
                    editor.cmd.do('delete')
                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $('<span>30%</span>'),
                onClick: (editor: Editor, $node: DomElement) => {
                    $node.attr('width', '30%')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $('<span>50%</span>'),
                onClick: (editor: Editor, $node: DomElement) => {
                    $node.attr('width', '50%')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $('<span>100%</span>'),
                onClick: (editor: Editor, $node: DomElement) => {
                    $node.attr('width', '100%')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $(`<span>${t('自定义尺寸')}</span>`),
                onClick: (editor: Editor, $node: DomElement) => {
                    $drag.show()
                    let close = $drag.find('.modalbox-close-btn')
                    let but = $drag.find('.button2')
                    let modal = $drag.find('.w-modalbox')
                    modal.on('click', function(){//没什么用
                        $drag.hide()
                    })
                    close.on('click', function(){
                        $drag.hide()
                    })
                    but.on('click', function(){
                        let width =  $drag.find('#width').val()
                        let height = $drag.find('#height').val()
                        if(width || height){
                            $node.attr('width', width +'px')
                            $node.attr('height', height +'px')
                        }else{
                            $node.attr('width', '320px')
                            $node.attr('height', '240px')
                        }
                        $drag.hide()
                    })
                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $(`<span>${t('重置')}</span>`),
                onClick: (editor: Editor, $node: DomElement) => {
                    $node.removeAttr('width')
                    $node.removeAttr('height')
                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
           
        ]

        tooltip = new Tooltip(editor, $node, conf)
        tooltip.create()
    }

    /**
     * 隐藏 tooltip
     */
    function hideImgTooltip() {
        // 移除 tooltip
        if (tooltip) {
            tooltip.remove()
            tooltip = null
        }
    }

    return {
        showImgTooltip,
        hideImgTooltip,
    }
}

/**
 * 绑定 tooltip 事件
 * @param editor 编辑器实例
 */
export default function bindTooltipEvent(editor: Editor) {
    const { showImgTooltip, hideImgTooltip } = createShowHideFn(editor)

    // 点击图片元素是，显示 tooltip
    editor.txt.eventHooks.videoClickEvents.push(showImgTooltip)

    // 点击其他地方，或者滚动时，隐藏 tooltip
    editor.txt.eventHooks.clickEvents.push(hideImgTooltip)
    editor.txt.eventHooks.keyupEvents.push(hideImgTooltip)
    editor.txt.eventHooks.toolbarClickEvents.push(hideImgTooltip)
    editor.txt.eventHooks.menuClickEvents.push(hideImgTooltip)
    editor.txt.eventHooks.textScrollEvents.push(hideImgTooltip)
    editor.txt.eventHooks.imgDragBarMouseDownEvents.push(hideImgTooltip)

    // change 时隐藏
    editor.txt.eventHooks.changeEvents.push(hideImgTooltip)
}