import { Popover, Space } from 'antd'
import React, { useMemo } from 'react'

interface Props {
    creativeComponents: {
        brand?: {
            value: {
                brandName: string
            }
        }[],
        description?: {
            value: {
                content: string
            }
        }[],
        video?: {
            value: {
                videoUrl: string
            }
        }[],
        image?: {
            value: {
                imageUrl: string
            }
        }[]
    }
}
/**
 * 预览
 */
const BoxOther: React.FC<Props> = ({ creativeComponents }) => {


    let el = useMemo(() => {
        let video = creativeComponents?.video?.[0]?.value?.videoUrl
        let imageUrl = creativeComponents?.image
        let titles = creativeComponents?.brand
        let descriptions = creativeComponents?.description
        if (video) {
            return <div>
                <Popover
                    placement='right'
                    content={<div>
                        {titles && titles?.length > 0 && <Space direction="vertical">
                            {titles.map((item, index) => <div key={index} style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{item?.value?.brandName}</div>)}
                        </Space>}
                        {descriptions && descriptions?.length > 0 && <Space direction="vertical">
                            {descriptions.map((item, index) => <small key={index} style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述：</strong>{item?.value?.content}</small>)}
                        </Space>}
                        <Space style={{ maxWidth: 300, display: 'flex', flexFlow: 'row wrap', margin: '10px 0' }}>
                            <video src={video} style={{ width: 250 }} controls />
                        </Space>
                    </div>}
                    destroyTooltipOnHide
                    mouseEnterDelay={0.5}
                >
                    <Space style={{ width: '100%' }}>
                        <video src={video} style={{ maxHeight: 18, maxWidth: 25 }} />
                        <span>{titles?.[0]?.value?.brandName}</span>
                    </Space>
                </Popover>
            </div>
        } else if (imageUrl && imageUrl?.length > 0) {
            return <Popover
                placement='right'
                content={<div
                    style={{ maxHeight: 450, overflow: 'hidden', overflowY: 'auto' }}
                >
                    <Space direction="vertical">
                        {titles && titles?.length > 0 && <Space direction="vertical">
                            {titles.map((item, index) => <div key={index} style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{item?.value?.brandName}</div>)}
                        </Space>}
                        {descriptions && descriptions?.length > 0 && <Space direction="vertical">
                            {descriptions.map((item, index) => <small key={index} style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述：</strong>{item?.value?.content}</small>)}
                        </Space>}
                        <Space wrap style={{ maxWidth: 500 }}>
                            {imageUrl?.map((item, index) => <img key={index} src={item?.value?.imageUrl} height={100} />)}
                        </Space>
                    </Space>
                </div>}
                destroyTooltipOnHide
                mouseEnterDelay={0.5}
            >
                {imageUrl?.[0]?.value?.imageUrl ? <img src={imageUrl?.[0]?.value?.imageUrl} height={18} /> : <span>无图片地址</span>}
            </Popover>
        } else if (titles && titles?.length > 0) {
            return <span>{titles?.[0]?.value?.brandName}</span>
        } else if (descriptions && descriptions?.length > 0) {
            return <span>{descriptions?.[0]?.value?.content}</span>
        } else {
            return <span>--</span>
        }

    }, [creativeComponents])

    return <div style={{ overflow: 'hidden', overflowX: 'auto' }}>
        {el}
    </div>
}

export default React.memo(BoxOther)