import useNewToken from '@/Hook/useNewToken';
import LookMsg from '@/pages/weComTask/components/previewMsg/lookMsg';
import { emoList } from '@/pages/weComTask/components/textEditor/Expression';
import { Popover, Typography } from 'antd';
import React from 'react';
const { Paragraph } = Typography;

interface Props {
    data: any
    name?: React.ReactNode
}
const ShowContentTable: React.FC<Props> = ({ name, data }) => {

    /*************************************/
    const { token } = useNewToken()
    /*************************************/

    const getMsgData = (item: any) => {
        let msgData: any = []
        if (item?.text?.content) {
            let newValue = item?.text?.content
            const newEmo = emoList.reduce((prev, cur) => {
                return [...prev, ...cur]
            }, [])
            const emos = newValue.match(/\[[\u4e00-\u9fa5]+\]/g)
            if (emos && emos?.length) {
                emos.forEach((emo: any) => {
                    const emoData = newEmo.find(o => `[${o.name}]` === emo)
                    if (emoData) {
                        newValue = newValue.replace(emo, `<img src="${emoData.url}" alt="${emoData.name}" style="width:20px;height:20px"/>`)
                    }
                })
            }
            if (newValue.includes('\n')) {
                newValue = newValue.replace('\n', `<br/>`)
            }
            const names = newValue.match(/%[\u4e00-\u9fa5]+%/g)
            if (names && names?.length) {
                newValue = newValue.replace('%昵称%', ` <span style="display: inline-block;margin:0 1px;position: relative; border: 1px solid ${token.colorBorder}; padding: ${token.paddingXS}px; border-radius: ${token.borderRadius}px;color: ${token.colorTextBase}; background: ${token.colorSuccess};color:${token.colorTextLightSolid}" contenteditable="false">昵称<strong data-name="昵称" style="padding: 0 6px;cursor:pointer" onclick="let html =document.querySelector('[data-name=昵称').parentElement.parentElement.innerHTML;let span = ' '+document.querySelector('[data-name=昵称]').parentElement.outerHTML+' ';console.log('=',html,'=');console.log('=',span,'=');document.execCommand('selectAll');document.execCommand('delete'); document.execCommand('insertHTML', true, html.replace(span,''));">X</strong></span> `)
            }
            msgData.push({
                textContent: newValue,
                mediaType: 'text'
            })
        }
        if (item?.attachmentList && item?.attachmentList?.length > 0) {
            const newAttachmentList = item?.attachmentList.map((item: any) => {
                switch (item.msgType) {
                    case 'TASK_CONTENT_IMAGE':
                        return { mediaType: 'image', imageUrl: item?.image?.picUrl }
                    case 'TASK_CONTENT_LINK':
                        return { mediaType: 'link', linkDesc: item?.link?.desc, linkPicurl: item?.link?.picUrl, linkTitle: item?.link?.title, linkUrl: item?.link?.url }
                    case 'TASK_STATUS_FILE':
                        return { mediaType: 'file', fileUrl: item?.file?.fileUrl }
                    case 'TASK_STATUS_VIDEO':
                        return { mediaType: 'video', videoUrl: item?.video?.videoUrl }
                    case 'TASK_STATUS_MINIPROGRAM':
                        return {
                            mediaType: 'miniprogram',
                            miniprogramAppid: item.miniprogram?.appId,
                            miniprogramPage: item?.miniprogram?.page,
                            miniprogramPicurl: item?.miniprogram?.picUrl,
                            miniprogramTitle: item?.miniprogram?.title
                        }
                }
            })
            msgData = msgData.concat(newAttachmentList)
        }
        return msgData
    }

    return <Popover
        placement="left"
        content={<LookMsg data={getMsgData(data)} />}
        styles={{ body: { width: 300, overflow: 'hidden', overflowY: 'auto', maxHeight: 480 } }}
    >
        <div
            style={{
                backgroundColor: 'rgba(0,0,0,0.1)',
                padding: '4px 8px',
                borderRadius: 8,
                overflow: 'hidden',
                cursor: 'help'
            }}
        >{name || '群发内容'}</div>
    </Popover>
};

export default ShowContentTable;