import { Avatar } from "antd"
import React from "react"
import { MediaContentProps } from "../../API/weMaterial/weMaterial"
import AudioNews from "../newsMould/audioNews"
import FileNews from "../newsMould/fileNews"
import ImgNews from "../newsMould/imgNews"
import LinkNews from "../newsMould/linkNews"
import MiniprogramNews from "../newsMould/miniprogramNews"
import TextNews from "../newsMould/textNews"
import VideoNews from "../newsMould/videoNews"
import style from './index.less'
import { UserOutlined } from '@ant-design/icons';

interface Props {
    data: MediaContentProps[]
    avatar?: string
}

const LookMsg: React.FC<Props> = ({ data, avatar }) => {
    

    return <div className={style.lookMsg}>
        {data?.map((item, index) => {
            return <div key={index} className={style.lookMsg_item}>
                <Avatar shape="square" src={avatar} icon={<UserOutlined />} />
                {item.mediaType === 'text' ? <TextNews style={{ marginBottom: 0 }} strong msg={item?.textContent || ''} />
                    : item.mediaType === 'image' ? <ImgNews src={item?.imageUrl} preview />
                        : item.mediaType === 'video' ? <VideoNews src={item?.videoUrl} preview />
                            : item.mediaType === 'voice' ? <AudioNews url={item?.voiceUrl} times={item.mediaPlayTime} />
                                : item.mediaType === 'miniprogram' ? <MiniprogramNews {...item} isDetails/>
                                    : item.mediaType === 'link' ? <LinkNews width={240} isBlank content={{ url: item.linkUrl as string, title: item.linkTitle as string, desc: item.linkDesc as string, cover: item.linkPicurl as string }} />
                                        : item.mediaType === 'file' ? <FileNews width={225} fileName={item?.fileName} fileSize={item.mediaSize} fileUrl={item.fileUrl} />
                                            : null}
            </div>
        })}
    </div>
}

export default React.memo(LookMsg)