import React from 'react';
import style from './index.less'
import { Tabs } from 'antd';
import { emoList } from '@/pages/weComTask/components/textEditor/Expression';
import useNewToken, { NewGlobalToken } from '@/Hook/useNewToken';
import { welcomeContentData } from '../../const';
import LookMsg from '@/pages/weComTask/components/previewMsg/lookMsg';


export const getMsgData = (item: any, token: NewGlobalToken) => {
    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
}

interface ShowContentProps {
    strategySettings: any[];
    massSendingContent: {
        massSendingContentDTO: any;
    }
    type?: 'qf' | 'highQf'
}

const ShowContent: React.FC<ShowContentProps> = ({ strategySettings, massSendingContent, type = 'qf' }) => {

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

    return <div className={style.showContent}>
        <Tabs
            tabPosition='left'
            className='mindTags'
            style={{ height: '100%', background: '#FFF' }}
            size='small'
            popupClassName={style.popupClassName}
            items={strategySettings?.map((item, index) => ({
                label: <span style={massSendingContent?.massSendingContentDTO?.[index]?.sendContentDto?.every(sc => sc?.sendMode || sc?.sendMode === 0) ? {} : { color: 'red' }}>{'策略' + (index + 1)}</span>,
                key: `${index}`,
                children: <div className={style.showContent_content}>
                    <div style={{ backgroundColor: token.colorPrimary, padding: 4, color: '#FFF', fontSize: 12, marginBottom: 5 }}>
                        <div>策略名称：{item?.strategyName || '<空>'}</div>
                    </div>
                    {massSendingContent?.massSendingContentDTO?.[index]?.sendContentDto?.map((si: any, sn: number) => {
                        return <div key={sn}>
                            {(si?.sendMode || si?.sendMode == 0) ? <>
                                <div style={{ backgroundColor: token.colorPrimary, padding: 4, color: '#FFF', fontSize: 12, marginTop: sn > 0 ? 16 : 0 }}>
                                    <div>
                                        发送对象组{sn + 1} - 发送模式：{welcomeContentData?.find(i => i.value === si?.sendMode)?.label}
                                    </div>
                                </div>
                                {si?.contentDTO?.map((item, index) => {
                                    return <div key={index} style={{ marginTop: 5, backgroundColor: '#f1f1f1', borderRadius: 6, padding: '5px 10px 16px' }}>
                                        <h3 style={{ textAlign: 'center' }}>内容{index + 1}</h3>
                                        <LookMsg data={type === 'highQf' ? item : getMsgData(item, token)} />
                                    </div>
                                })}
                            </> : <div style={{ backgroundColor: token.colorError, padding: 4, color: '#FFF', fontSize: 12, marginTop: sn > 0 ? 16 : 0 }}>
                                <div>
                                    发送对象组{sn + 1} - 内容未配置
                                </div>
                            </div>}
                        </div>
                    })}
                </div>
            }))}
        />
    </div>
};

export default React.memo(ShowContent);