/**
 * @description video 菜单 panel tab 配置
 * @author tonghan
 */

import Editor from '../../editor/index'
import { PanelConf } from '../menu-constructors/Panel'
import { getRandom } from '../../utils/util'
import $ from '../../utils/dom-core'
import UploadImg from '../img/upload-img'

export default function (editor: Editor, video: string): PanelConf {

    const config = editor.config
    const uploadImg = new UploadImg(editor)
     // 创建 id
    // 上传视频id
    var upTriggerVideoId = getRandom('up-trigger-video');
    var upFileVideoId = getRandom('up-file-video');

    // panel 中需要用到的id
    const inputIFrameId = getRandom('input-iframe')
    const btnOkId = getRandom('btn-ok')

    /**
     * 插入链接
     * @param iframe html标签
     */
    function insertVideo(video: string): void {
        editor.cmd.do('insertHTML', video + '<p><br></p>')
    }
  

    const conf = {
        width: 300,
        height: 0,

        // panel 中可包含多个 tab
        tabs: [
             // first tab
        {
            // 标题
            title: editor.i18next.t('menus.panelMenus.video.上传视频'),
            // 模板
            tpl: `<div class="w-e-up-img-container">
                    <div id="${upTriggerVideoId}" class="w-e-up-btn">
                        <i class="w-e-icon-upload2"></i>
                    </div>
                    <div style="display:none;">
                        <input id="${upFileVideoId}" type="file" multiple="multiple" accept="application/pdf,video/*"/>
                    </div>
                </div>`,
            // 事件绑定
            events: [
                // 触发选择图片
                {
                    selector: '#' + upTriggerVideoId,
                    type: 'click',
                    fn: () => {
                        const $file = $('#' + upFileVideoId)
                        const fileElem = $file.elems[0]
                        if (fileElem) {
                            fileElem.click()
                        } else {
                            // 返回 true 可关闭 panel
                            return true
                        }
                    },
                },
                // 选择图片完毕
                {
                    selector: '#' + upFileVideoId,
                    type: 'change',
                    fn: () => {
                        const $file = $('#' + upFileVideoId)
                        const fileElem = $file.elems[0]
                        if (!fileElem) {
                            // 返回 true 可关闭 panel
                            return true
                        }

                        // 获取选中的 file 对象列表
                        const fileList = (fileElem as any).files
                        if (fileList.length) {
                            uploadImg.uploadVideo(fileList)
                        }

                        // 返回 true 可关闭 panel
                        return true
                    },
                },
            ],
        }, // first tab end
            {
                // tab 的标题
                title: editor.i18next.t('menus.panelMenus.video.插入视频'),
                // 模板
                tpl: `<div>
                        <input 
                            id="${inputIFrameId}" 
                            type="text" 
                            class="block" 
                            placeholder="${editor.i18next.t('如')}：<iframe src=... ></iframe>"/>
                        </td>
                        <div class="w-e-button-container">
                            <button id="${btnOkId}" class="right">
                                ${editor.i18next.t('插入')}
                            </button>
                        </div>
                    </div>`,
                // 事件绑定
                events: [
                    // 插入视频
                    {
                        selector: '#' + btnOkId,
                        type: 'click',
                        fn: () => {
                            // 执行插入视频
                            const $video = $('#' + inputIFrameId)
                            let video = $video.val().trim()

                            // 视频为空，则不插入
                            if (!video) return

                            insertVideo(video)

                            // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
                            return true
                        },
                    },
                ],
            }, // tab end
        ], // tabs end
    }
    

    return conf
}