import { Empty, Popover, Space, Typography } from "antd"
import React from "react"
import style from '../index.less'
import styles from '../Material/index.less'
import VideoNews from "@/pages/launchSystemNew/components/newsModal/videoNews";
const { Title, Text } = Typography;

/**
 * 预览创意素材
 * @returns 
 */
const PreviewImg: React.FC<{ strategyValue: { dynamicMaterialDTos: any, mediaType: number, deliveryMode: string, creativeTemplateId: number, dynamicCreativesTextDTOS: any } }> = ({ strategyValue: { dynamicMaterialDTos, mediaType, deliveryMode, creativeTemplateId, dynamicCreativesTextDTOS } }) => {



    return <Space>
        <Popover
            destroyTooltipOnHide={true}
            mouseEnterDelay={0.5}
            content={<div className={style.detail} style={{ width: 500, maxWidth: 500 }}>
                <div className={style.detail_body}>
                    {(dynamicMaterialDTos && Object.keys(dynamicMaterialDTos).length > 0) ?
                        <>
                            <Title level={5} style={{ fontSize: 12 }}>{mediaType === 0 ? '全账号复用' : mediaType === 1 ? '平均分配到广告' : mediaType === 2 ? '顺序分配到广告' : null}</Title>
                            <div className={style.detail_body_m}>
                                {dynamicMaterialDTos.dynamicGroup.map((item: any, index: number) => {
                                    let dynamicGroup = item
                                    if (deliveryMode === 'DELIVERY_MODE_CUSTOMIZE') {
                                        let keys = Object.keys(dynamicGroup)
                                        return <div key={index} style={{ width: deliveryMode === 'DELIVERY_MODE_CUSTOMIZE' ? [641, 642, 643].includes(creativeTemplateId) ? '100%' : [720, 721, 722, 1529, 618].includes(creativeTemplateId) ? '50%' : '25%' : '100%' }}>
                                            <Title level={5} style={{ fontSize: 12 }}>创意组{index + 1}</Title>
                                            {(keys.includes('video_id') || keys.includes('short_video1')) ? <div className={style.video}>
                                                <VideoNews src={item?.video_id?.url || item?.short_video1?.url} keyFrameImageUrl={item?.video_id?.keyFrameImageUrl || item?.short_video1?.keyFrameImageUrl} />
                                                {item?.cover_id && <div className={style.cover_image}>
                                                    <img src={item?.cover_id?.url} />
                                                </div>}
                                            </div> : (keys.includes('image_list') || keys.includes('element_story')) ? <div className={style.imageList}>
                                                {item?.image_list?.map((item: { url: string | undefined; }, index: undefined) => <div className={style.cover_image} key={index}>
                                                    <img src={item?.url} />
                                                </div>)}
                                            </div> : keys.includes('image_id') ? <div className={style.cover_image}>
                                                <img src={item?.image_id?.url} />
                                            </div> : null}
                                        </div>
                                    } else {
                                        return <div key={index} style={{ width: '100%' }}>
                                            <Title level={5} style={{ fontSize: 12 }}>创意组{index + 1}</Title>
                                            <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
                                                {item?.list?.map((item: any, index: number) => {
                                                    if (Array.isArray(item)) {
                                                        let length = item.length
                                                        return <div className={styles.boxList_body_item} key={index} style={{ width: 60, height: 60 }}>
                                                            <div className={styles.tag}>{length}图</div>
                                                            <div className={styles.content} style={{ width: 60, height: 60 }}>
                                                                {item.map((l, i) => <img src={l?.url} key={i} style={{ width: length === 6 ? 19.9 : 29.9 }} />)}
                                                            </div>
                                                        </div>
                                                    } else if (item?.url?.includes('mp4') || item?.keyFrameImageUrl) {
                                                        return <div className={styles.boxList_body_item} key={index} style={{ width: 60, height: 60 }}>
                                                            <div className={styles.content} style={{ width: 60, height: 60 }}>
                                                                <VideoNews src={item?.url} style={{ width: 60, height: 60 }} keyFrameImageUrl={item?.keyFrameImageUrl} maskBodyStyle={{ backgroundColor: "rgba(242, 246, 254, 0.1)" }} />
                                                            </div>
                                                        </div>
                                                    } else {
                                                        return <div className={styles.boxList_body_item} key={index} style={{ width: 60, height: 60 }}>
                                                            <div className={styles.content} style={{ width: 60, height: 60 }}><img src={item?.url} /></div>
                                                        </div>
                                                    }
                                                })}
                                            </div>
                                        </div>
                                    }

                                })}
                            </div>
                        </> :
                        <div className={style.empty_block}>
                            <Empty description="暂无素材" imageStyle={{ height: 50 }} />
                        </div>}
                </div>

            </div>}
            title="预览"
        >
            <a style={{ fontSize: 12 }}>素材预览</a>
        </Popover>

        <Popover
            destroyTooltipOnHide={true}
            mouseEnterDelay={0.5}
            content={<div className={style.detail} style={{ minWidth: 200, maxWidth: 250 }}>
                <div className={style.detail_body}>
                    <Title level={5} style={{ fontSize: 12 }} ellipsis>{dynamicCreativesTextDTOS?.type === 0 ? '全部相同' : dynamicCreativesTextDTOS?.type === 1 ? '按创意组一一对应' : dynamicCreativesTextDTOS?.type === 2 ? '按文案顺序分配' : dynamicCreativesTextDTOS?.type === 3 ? '先分配创意组，文案后叉乘' : dynamicCreativesTextDTOS?.type === 4 ? '创意组和文案叉乘打乱后分配' : null}</Title>
                    {dynamicCreativesTextDTOS?.dynamicCreativesTextDetailDTOList?.map((item: { [x: string]: (boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined)[]; }, index: number) => {
                        if (item) {
                            let keys = Object.keys(item)
                            return <div key={index}>
                                {keys.includes('description') ? <>
                                    <Title level={5} style={{ fontSize: 12 }}>文案</Title>
                                    {item['description'].map((t, index) => <div className={style.text} key={index}><Text ellipsis={{ tooltip: true }}>{t}</Text></div>)}
                                </> : keys.includes('title') ? <>
                                    <Title level={5} style={{ fontSize: 12 }}>标题</Title>
                                    {item['title'].map((t, index) => <div className={style.text} key={index}><Text ellipsis={{ tooltip: true }}>{t}</Text></div>)}
                                </> : null}
                            </div>
                        }
                        return null
                    })}
                </div>
            </div>}
            title="预览"
        >
            <a style={{ fontSize: 12 }}>文案预览</a>
        </Popover>
    </Space>
}

export default React.memo(PreviewImg)