import React, { useEffect, useState } from "react"
import style from '../../tencentAdPutIn/create/index.less'
import { AD_STATUS_ENUM, CONVERSION_DATA_ENUM, CONVERSION_TARGET_ENUM, DELIVERY_MODE_ENUM, FLOATING_ZONE_TYPE_ENUM, PAGE_TYPE_ENUM, TEXT_LINK_TYPE_ENUM } from "../../tencentAdPutIn/const"
import { Space, Tag } from "antd"
import { getProfilesApi } from "@/services/adqV3/global"
import { useAjax } from "@/Hook/useAjax"


interface Props {
    data: any
}

/**
 * 创意详情
 * @param param0 
 * @returns 
 */
const DynamicTooltip: React.FC<Props> = ({ data: dynamicData }) => {

    /************************************/
    const { deliveryMode, creativeTemplateId, dynamicCreativeName, creativeComponents, configuredStatus } = dynamicData
    const { textLink, actionButton, showData, brand, mainJumpInfo, creativeLabelDTOS, creativeBarrageDTOS, creativeFirstReplyDTO, floatingZoneComponent } = creativeComponents || {}

    const [profileData, setprofileData] = useState<any>()
    const getProfiles = useAjax((params) => getProfilesApi(params))
    /************************************/

    useEffect(() => {
        if (['PAGE_TYPE_H5_PROFILE'].includes(brand?.[0]?.value?.jumpInfo?.pageType)) {
            getProfiles.run({}).then(res => {
                if (res) {
                    setprofileData(res?.find((item: { id: any }) => item.id === brand?.[0]?.value?.profileId))
                }
            })
        }
    }, [brand])

    return <div className={style.detail_body} style={{ height: 'auto' }}>
        {dynamicData && Object.keys(dynamicData).length > 0 && <>
            <p>创意名称：{dynamicCreativeName}</p>
            <p style={{ fontWeight: 'bold', color: '#000' }}>创意状态：{AD_STATUS_ENUM[configuredStatus as keyof typeof AD_STATUS_ENUM]}</p>
            <p>投放模式：{DELIVERY_MODE_ENUM[deliveryMode as keyof typeof DELIVERY_MODE_ENUM]}</p>
            <p>创意形式ID：{creativeTemplateId}</p>
            {brand?.length > 0 && <>
                <p style={{ fontWeight: 'bold', color: '#000' }}>品牌形象跳转：{PAGE_TYPE_ENUM[brand?.[0]?.value?.jumpInfo?.pageType as keyof typeof PAGE_TYPE_ENUM]}</p>
                {['PAGE_TYPE_H5_PROFILE'].includes(brand?.[0]?.value?.jumpInfo?.pageType) ? <>
                    {profileData ? <>
                        <Space>
                            <img src={profileData?.headImageUrl} alt="" width={20} style={{ display: 'block' }} />
                            <span style={{ fontWeight: 'bold', color: '#000', fontSize: 12 }}>{profileData?.profileName}</span>
                        </Space>
                        <p>详细描述：{profileData?.description}</p>
                    </> : <span style={{ color: 'red', fontWeight: 'bold', fontSize: 12 }}>{getProfiles.loading ? '' : '当前头像昵称跳转页被删除'} </span>}
                </> : ['PAGE_TYPE_NOT_USED'].includes(brand?.[0]?.value?.jumpInfo?.pageType) && <Space align="center">
                    <img src={brand?.[0]?.value?.brandImageId} alt="" width={20} style={{ display: 'block' }} />
                    <span style={{ fontWeight: 'bold', color: '#000', fontSize: 12 }}>{brand?.[0]?.value?.brandName}</span>
                </Space>}
            </>}
            <p style={{ fontWeight: 'bold', color: '#000' }}>跳转类型：{mainJumpInfo?.map((item: any) => {
                // let pageSpec = item.value.pageSpec
                // return PAGE_TYPE_ENUM[pageSpecFieldConVertUn[Object.keys(pageSpec)?.[0] as keyof typeof pageSpecFieldConVertUn] as keyof typeof PAGE_TYPE_ENUM]
                let pageType = item.value.pageType
                return PAGE_TYPE_ENUM[pageType as keyof typeof PAGE_TYPE_ENUM]
            }).toString()}</p>
            {textLink?.length > 0 && <>
                <p style={{ fontWeight: 'bold', color: '#000' }}>朋友圈文字链：开启</p>
                <p>文字链文案：{TEXT_LINK_TYPE_ENUM[textLink?.[0]?.value?.linkNameType as keyof typeof TEXT_LINK_TYPE_ENUM]}</p>
                {textLink?.[0]?.value?.jumpInfo?.pageType && <p>跳转落地页：{PAGE_TYPE_ENUM[textLink?.[0]?.value?.jumpInfo?.pageType as keyof typeof PAGE_TYPE_ENUM]}</p>}
            </>}
            {actionButton?.length > 0 && <>
                <p style={{ fontWeight: 'bold', color: '#000' }}>行动按钮：开启</p>
                <p>按钮文案：{actionButton?.[0]?.value?.buttonText}</p>
                {actionButton?.[0]?.value?.jumpInfo?.pageType && <p>跳转落地页：{PAGE_TYPE_ENUM[actionButton?.[0]?.value?.jumpInfo?.pageType as keyof typeof PAGE_TYPE_ENUM]}</p>}
            </>}
            {creativeLabelDTOS?.length > 0 && <>
                <p style={{ fontWeight: 'bold', color: '#000' }}>标签：</p>
                {creativeLabelDTOS.map((item: { content: string }, index: number) => <Tag key={index}>{item.content}</Tag>)}
            </>}
            {creativeBarrageDTOS?.length > 0 && <>
                <p style={{ fontWeight: 'bold', color: '#000' }}>弹幕：</p>
                {creativeBarrageDTOS.map((item: { text: string }, index: number) => <Tag key={index}>{item.text}</Tag>)}
            </>}
            {showData?.length > 0 && <>
                <p style={{ fontWeight: 'bold', color: '#000' }}>数据外显：开启</p>
                <p>数据类型：{CONVERSION_DATA_ENUM[showData?.[0]?.value?.conversionDataType as keyof typeof CONVERSION_DATA_ENUM]}</p>
                <p>转化行为：{CONVERSION_TARGET_ENUM[showData?.[0]?.value?.conversionTargetType as keyof typeof CONVERSION_TARGET_ENUM]}</p>
            </>}
            {floatingZoneComponent && Object.keys(floatingZoneComponent).length > 0 && <>
                <p style={{ fontWeight: 'bold', color: '#000' }}>浮层卡片：{floatingZoneComponent?.floatingZoneSwitch ? '开启' : '关闭'}</p>
                {floatingZoneComponent?.floatingZoneType && <p>复层卡片类型：{FLOATING_ZONE_TYPE_ENUM[floatingZoneComponent.floatingZoneType as keyof typeof FLOATING_ZONE_TYPE_ENUM]}</p>}
                {floatingZoneComponent?.floatingZoneImageUrl && <p style={{ display: 'flex', alignItems: 'flex-start' }}>创意图片：<img src={floatingZoneComponent?.floatingZoneImageUrl} width={40} /></p>}
                {floatingZoneComponent?.floatingZoneSingleImageUrl && <p style={{ display: 'flex', alignItems: 'flex-start' }}>创意图片：<img src={floatingZoneComponent?.floatingZoneSingleImageUrl} width={40} /></p>}
                {floatingZoneComponent?.floatingZoneName && <p>文案：{floatingZoneComponent.floatingZoneName}</p>}
                {floatingZoneComponent?.floatingZoneDesc && <p>文案：{floatingZoneComponent.floatingZoneDesc}</p>}
                {floatingZoneComponent?.floatingZoneButtonText && <p>按钮文案：{floatingZoneComponent.floatingZoneButtonText}</p>}
            </>}
            {creativeFirstReplyDTO?.text && <p>首评：{creativeFirstReplyDTO?.text}</p>}
        </>}
    </div>
}


export default React.memo(DynamicTooltip)