import React from "react"
import SmMaterialModal from '@/components/MaterialModal/smModalBox'
import WeChatImgCard from "@/components/WeChatImgCard"
import Alink from '@/components/Alink'
/**图片上传插件*/
const uploadImagePlugin = (ueditor: any, isShowWx?: boolean) => {
    return {
        menuText: '图片上传',
        cssRules: `background-image: url(/ueditor/themes/default/icon/tool-0332@2x.png) !important;background-size: 20px 1340px;background-position: 0 -480px;`,
        render: (visible: any, closeModal: any) => {
            const handleSelectImage = (url: string) => {
                ueditor.focus()
                ueditor.execCommand('insertHtml', `<img 
                style='max-width:100%'
                src=\"${url}\" 
                alt=\"\" 
                data-w=\"auto\" 
                data-ratio=\"0.66796875\" 
                data-type=\"${url.replace(/http[s]?:\/\/\S*(wx_fmt=|\.)/ig, '') === 'gif' ? 'png' : url.replace(/http[s]?:\/\/\S*(wx_fmt=|\.)/ig, '')}\"
                />`)
                closeModal()
            }
            return visible && <SmMaterialModal
                mediaType={1}
                onCancel={closeModal}
                title='选择图片'
                visible={visible}
                onOk={(props: any) => { handleSelectImage(props?.url) }}
                isShowWx={isShowWx}
                isAllData
                noFile={true}
            />
        }
    }
}
/**音频上传插件*/
const uploadAudioPlugin = (ueditor: any) => {
    return {
        menuText: '音频上传',
        cssRules: `background-image: url(/ueditor/themes/default/icon/tool-0332@2x.png) !important;background-size: 20px 1340px;background-position: 0 -510px;`,
        render: (visible: any, closeModal: any) => {
            const handleSelectImage = (url: string) => {
                ueditor.focus()
                ueditor.execCommand('insertparagraph')
                ueditor.execCommand('insertHtml', `<audio src="${url}" controls="true" data-extra="{}"></audio>`)
                ueditor.execCommand('insertparagraph')
                closeModal()
            }
            return visible && <SmMaterialModal mediaType={2} onCancel={closeModal} title='公众号音频素材' visible={visible} onOk={handleSelectImage} actionKey='2' />
        }
    }
}
/**视频上传插件*/
const uploadVidioPlugin = (ueditor: any) => {
    return {
        menuText: '视频上传',
        cssRules: `background-image: url(/ueditor/themes/default/icon/tool-0332@2x.png) !important;background-size: 20px 1340px;background-position: 0 -540px;`,
        render: (visible: any, closeModal: any) => {
            const handleSelectImage = (url: string) => {
                ueditor.focus()
                ueditor.execCommand('insertparagraph')
                ueditor.execCommand('insertHtml', `
                <iframe
                    data-vidtype="2" 
                    height="310" 
                    width="500"
                    data-ratio="1.7666666666666666" 
                    data-w="848"
                    frameborder="0" 
                    data-src=${url}
                    allowfullscreen="" 
                    src=${url}
                >
                </iframe>
                `)
                ueditor.execCommand('insertparagraph')
                closeModal()
            }
            return visible && <SmMaterialModal mediaType={3} onCancel={closeModal} title='公众号视频素材' visible={visible} onOk={handleSelectImage} actionKey='1' />
        }
    }
}
/**小程序图片链插件*/
const uploadWeChatImagePlugin = (ueditor: any,) => {
    return {
        menuText: '小程序图片链',
        cssRules: `background-image: url(/ueditor/themes/default/icon/tool-0332@2x.png) !important;background-size: 20px 1340px;background-position: 0 -1320px;`,
        render: (visible: any, closeModal: any) => {
            const handleSelectImage = (obj: { img: string, appid: string, appPath: string, href?: string }) => {
                ueditor.focus()
                ueditor.execCommand('insertHtml', `<a data-miniprogram-appid=\"${obj.appid}\" data-miniprogram-path=\"${obj.appPath}\" href=\"${obj.href}\"><img src=\"${obj.img}\" alt=\"\" data-width=\"null\" data-ratio=\"NaN\"/></a>`)
                closeModal()
            }
            return visible && <WeChatImgCard
                onCancel={closeModal}
                title='小程序图片链'
                visible={visible}
                onOk={(props: { img: string, appid: string, appPath: string, href?: string }) => { handleSelectImage(props) }}
                weCathType='img'
                isOnUserId={false}
            />
        }
    }
}
/**小程序卡片链插件*/
const uploadWeChatCardPlugin = (ueditor: any,) => {
    return {
        menuText: '小程序卡片',
        cssRules: `background-image: url(/ueditor/themes/default/icon/tool-0332@2x.png) !important;background-size: 20px 1340px;background-position: 0 -1290px;`,
        render: (visible: any, closeModal: any) => {
            const handleSelectImage = (obj: { img: string, appid: string, appPath: string, cardTitle?: string }) => {
                ueditor.focus()
                ueditor.execCommand('insertHtml', `<mp-miniprogram data-miniprogram-appid=\"${obj?.appid}\" data-miniprogram-path=\"${obj?.appPath}\" data-miniprogram-title=\"${obj?.cardTitle}\" data-miniprogram-type=\"card\" data-miniprogram-servicetype=\"0\" data-miniprogram-imageurl=\"${obj?.img}\"></mp-miniprogram>`)
                closeModal()
            }
            return visible && <WeChatImgCard
                onCancel={closeModal}
                title='小程序卡片'
                visible={visible}
                onOk={(props: { img: string, appid: string, appPath: string, cardTitle?: string }) => { handleSelectImage(props) }}
                weCathType='card'
                isOnUserId={false}
            />
        }
    }
}
/**A链接功能插件*/
const uploadALink = (ueditor: any,) => {
    return {
        menuText: 'A链接',
        cssRules: `background-image: url(/ueditor/themes/default/icon/tool-0332@2x.png) !important;background-size: 20px 1340px;background-position: 0 -1290px;`,
        render: (visible: any, closeModal: any) => {
            const handleSelectImage = (html: string) => {
                ueditor.focus()
                ueditor.execCommand('insertHtml', `${html}`)
                closeModal()
            }
            return visible && <Alink
                onCancel={closeModal}
                title='A链接'
                visible={visible}
                onOk={(props: string) => { handleSelectImage(props) }}
                weCathType='card'
                isOnUserId={false}
            />
        }
    }
}
export { uploadImagePlugin, uploadAudioPlugin, uploadVidioPlugin, uploadWeChatImagePlugin, uploadWeChatCardPlugin, uploadALink }