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, PAGE_TYPE_ENUM, TEXT_LINK_TYPE_ENUM, pageSpecFieldConVertUn } from "../../tencentAdPutIn/const"
import { Space } 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 } = 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]}</p>
            <p>投放模式：{DELIVERY_MODE_ENUM[deliveryMode]}</p>
            <p>创意形式ID：{creativeTemplateId}</p>
            {brand?.length > 0 && <>
                <p style={{ fontWeight: 'bold', color: '#000' }}>品牌形象跳转：{PAGE_TYPE_ENUM[brand?.[0]?.value?.jumpInfo?.pageType]}</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]]]
            }).toString()}</p>
            {textLink?.length > 0 && <>
                <p style={{ fontWeight: 'bold', color: '#000' }}>朋友圈文字链：开启</p>
                <p>文字链文案：{TEXT_LINK_TYPE_ENUM[textLink?.[0]?.value?.linkNameType]}</p>
                {textLink?.[0]?.value?.jumpInfo?.pageType && <p>跳转落地页：{PAGE_TYPE_ENUM[textLink?.[0]?.value?.jumpInfo?.pageType]}</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]}</p>}
            </>}
            {showData?.length > 0 && <>
                <p style={{ fontWeight: 'bold', color: '#000' }}>数据外显：开启</p>
                <p>数据类型：{CONVERSION_DATA_ENUM[showData?.[0]?.value?.conversionDataType]}</p>
                <p>转化行为：{CONVERSION_TARGET_ENUM[showData?.[0]?.value?.conversionTargetType]}</p>
            </>}
        </>}
    </div>
}


export default React.memo(DynamicTooltip)