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

import editor from '../../editor/index'
import { PanelConf, PanelTabConf } from '../menu-constructors/Panel'
import { getRandom } from '../../utils/util'
import $ from '../../utils/dom-core'
import UploadVideo from './upload-video'
import { videoRegex } from '../../utils/const'

export default function (editor: editor, video: string): PanelConf {
    const config = editor.config
    const uploadVideo = new UploadVideo(editor)

    // panel 中需要用到的id
    const upVideoTriggerId = getRandom('up-video-trigger-id')
    const upVideoId = getRandom('up-video-id')
    const inputVideoLinkId = getRandom('input-video-link')
    const videoLinkBtnId = getRandom('video-link-btn')

    const i18nPrefix = 'menus.panelMenus.video.'
    const t = (text: string, prefix: string = i18nPrefix): string => {
        return editor.i18next.t(prefix + text)
    }

    /**
     * 提示信息
     * @param alertInfo alert info
     * @param debugInfo debug info
     */
    function alert(alertInfo: string, debugInfo?: string): void {
        const customAlert = editor.config.customAlert
        if (customAlert) {
            customAlert(alertInfo)
        } else {
            window.alert(alertInfo)
        }

        if (debugInfo) {
            console.error('wangEditor: ' + debugInfo)
        }
    }

    /**
     * 校验网络视频链接是否合法
     * @param src 网络视频链接
     */
    function checkLinkVideo(src: string): boolean {
        //编辑器进行正常校验，视频合规则使指针为true，不合规为false
        let flag = true
        if (!videoRegex.test(src)) {
            flag = false
        }

        //查看开发者自定义配置的返回值
        const check = config.linkVideoCheck(src)
        if (check === undefined) {
            //用户未能通过开发者的校验，且开发者不希望编辑器提示用户
            if (flag === false) console.log(t('您刚才插入的视频链接未通过编辑器校验', 'validate.'))
        } else if (check === true) {
            //用户通过了开发者的校验
            if (flag === false) {
                alert(
                    `${t('您插入的网络视频无法识别', 'validate.')}，${t(
                        '请替换为支持的视频类型',
                        'validate.'
                    )}：mp4 | rmvb | wma | avi | mov`
                )
            } else return true
        } else {
            //用户未能通过开发者的校验，开发者希望我们提示这一字符串
            alert(check)
        }
        return false
    }

    // tabs 配置 -----------------------------------------
    const fileMultipleAttr = config.uploadVideoMaxLength === 1 ? '' : 'multiple="multiple"'
    const tabsConf: PanelTabConf[] = [
        {
            // table 的标题
            title: t('上传视频'),
            // 模板
            tpl: `<div class="w-e-up-img-container">
                    <div id="${upVideoTriggerId}" class="w-e-up-btn">
                        <i class="w-e-icon-upload2"></i>
                    </div>
                    <div style="display:none;">
                        <input id="${upVideoId}" type="file" ${fileMultipleAttr} accept="video/mp4, video/rmvb, video/wma, video/avi, video/mov"/>
                    </div>
                </div>`,
            // 事件绑定
            events: [
                //触发选择视频
                {
                    selector: '#' + upVideoTriggerId,
                    type: 'click',
                    fn: () => {
                        const $file = $('#' + upVideoId)
                        const fileElem = $file.elems[0]
                        if (fileElem) {
                            fileElem.click()
                        } else {
                            // 返回 true 可关闭 panel
                            return true
                        }
                    },
                },
                // 选择视频完毕
                {
                    selector: '#' + upVideoId,
                    type: 'change',
                    fn: () => {
                        const $file = $('#' + upVideoId)
                        const fileElem = $file.elems[0]
                        if (!fileElem) {
                            // 返回 true 可关闭 panel
                            return true
                        }

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

                        // 返回 true 可关闭 panel
                        return true
                    },
                },
            ]
        },
        {
            // tab 的标题
            title: t('网络视频'),
            // 模板
            tpl: `<div>
                    <input 
                        id="${inputVideoLinkId}" 
                        type="text" 
                        class="block" 
                        placeholder="${t('视频链接')}"/>
                    </td>
                    <div class="w-e-button-container">
                        <button type="button" id="${videoLinkBtnId}" class="right">
                            ${t('插入', '')}
                        </button>
                    </div>
                </div>`,
            // 事件绑定
            events: [
                // 插入视频
                {
                    selector: '#' + videoLinkBtnId,
                    type: 'click',
                    fn: () => {
                        // 执行插入视频
                        const $video = $('#' + inputVideoLinkId)
                        let url = $video.val().trim()

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

                        //如果不能通过校验也直接返回
                        if (!checkLinkVideo(url)) return

                        uploadVideo.insertVideo(url)

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

    // 最终的配置 -----------------------------------------
    const conf: PanelConf = {
        width: 300,
        height: 0,
        tabs: [],
    }

    // 显示“上传视频”
    if (
        window.FileReader &&
        (config.uploadVideoServer || config.customUploadVideo)
    ) {
        conf.tabs.push(tabsConf[0])
    }
    // 显示“插入网络视频”
    if (config.showLinkVideo) {
        conf.tabs.push(tabsConf[1])
    }

    return conf
}