import { Popover, Space, Table } from "antd"
import React from "react"
import './index.less'
import cpTableConfig from "./cpTableConfig"

interface Props {
    deliveryMode: string[]
    creativePreview: {
        brand?: {
            value: {
                brandName: string,
                brandImageUrl: string
            }
        }[],
        title?: {
            value: {
                content: string
            }
        }[],
        description?: {
            value: {
                content: string
            }
        }[],
        video?: {
            value: {
                videoUrl: string
            }
        }[],
        shortVideo?: {
            value: {
                videoUrl: string
            }
        }[],
        image?: {
            value: {
                imageUrl: string
            }
        }[],
        elementStory?: {
            value: {
                list: {
                    imageUrl: string
                }[]
            }
        }[],
        imageList?: {
            value: {
                list: {
                    imageUrl: string
                }[]
            }
        }[]
    }[]
}

/**
 * 创意预览
 * @param param0 
 * @returns 
 */
const CreativePreview: React.FC<Props> = ({ creativePreview, deliveryMode }) => {

    /***************************/
    let video = creativePreview?.[0]?.video?.[0]?.value?.videoUrl
    let imageUrl = creativePreview?.[0]?.image?.[0]?.value?.imageUrl
    if (!imageUrl && creativePreview?.[0]?.elementStory) {
        imageUrl = creativePreview?.[0]?.elementStory?.[0]?.value?.list?.[0]?.imageUrl
    }
    if (!imageUrl && creativePreview?.[0]?.imageList) {
        imageUrl = creativePreview?.[0]?.imageList?.[0]?.value?.list?.[0]?.imageUrl
    }
    if (!video && !imageUrl && creativePreview?.[0]?.shortVideo) {
        video = creativePreview?.[0]?.shortVideo?.[0]?.value?.videoUrl
    }
    let titles = creativePreview?.[0]?.brand
    let descriptions = creativePreview?.[0]?.description
    let title = creativePreview?.[0]?.title
    /***************************/

    return <>
        <Popover
            content={<div style={{ width: 600, height: creativePreview.length > 10 ? 450 : 'auto' }}>
                <Table
                    bordered
                    columns={cpTableConfig()}
                    dataSource={creativePreview?.map((item, index) => ({ ...item, deliveryMode: deliveryMode[index], id: index + 1 }))}
                    scroll={{ y: 380 }}
                    rowKey={'id'}
                    size="small"
                    className="creativePreview"
                />
            </div>}
            mouseEnterDelay={0.5}
            destroyTooltipOnHide={true}
            placement="left"
        >
            <div>
                {video ? <video src={video} style={{ maxHeight: 18, maxWidth: 25 }} /> : imageUrl ? <div>
                    {imageUrl ? <img src={imageUrl} height={18} /> : <span>无图片地址</span>}
                </div> : (titles && titles?.length > 0) ? <Space>
                    <img src={titles?.[0]?.value?.brandImageUrl} height={18} />
                    <span>{titles?.[0]?.value?.brandName}</span>
                </Space> : (title && title?.length > 0) ? <span>{title?.[0]?.value?.content}</span> : (descriptions && descriptions?.length > 0) ? <span>{descriptions?.[0]?.value?.content}</span> : <span>没有素材</span>}
            </div>
        </Popover>
    </>
}

export default React.memo(CreativePreview)