import { Card, Typography } from "antd"
import React from "react"
import { MediaContentProps } from "../../API/weMaterial/weMaterial"
import style from './index.less'
import { LeftOutlined, EllipsisOutlined, CameraOutlined } from '@ant-design/icons';
import LookMsg from "./lookMsg";
import useNewToken from "@/Hook/useNewToken";
import LookPyq from "./lookPyq";

export type PreviewMsgType = 'MSG' | 'PYQ'

interface Props {
    type: PreviewMsgType,
    content: {
        text?: string
        data?: MediaContentProps[]
    },
    title?: string
    subTitle?: string
    minWidth?: string | number
    height?: string | number
    maxHeight?: string | number
    minHeight?: string | number
    backgroundColor?: any
    avatar?: string
}
/** */
const PreviewMsg: React.FC<Props> = ({ type, content, title = '木木', subTitle = '@企微', minWidth = 300, height = 480, maxHeight = 480, minHeight = 80, backgroundColor, avatar = 'https://wework.qpic.cn/wwpic/347347_8PBZ4y-OQGq2N2T_1648520611/0' }) => {

    /********************************/
    const { token } = useNewToken()
    /********************************/

    return <div className={style.previewMsg}>
        {type === 'MSG' ? <Card
            styles={{
                body: { minWidth, height, minHeight, maxHeight, overflow: 'auto', backgroundColor: backgroundColor ? backgroundColor : token.colorBgTextHover },
                header: { padding: '5px 10px' }
            }}
            title={<div className={style.title}>
                <LeftOutlined />
                <div className={style.name}>
                    <Typography.Title level={5} style={{ margin: 0, lineHeight: 'normal' }}>{title}</Typography.Title>
                    <Typography.Text style={{ margin: 0, lineHeight: 'normal' }} type="warning">{subTitle}</Typography.Text>
                </div>
                <EllipsisOutlined />
            </div>}
        >
            <LookMsg data={content?.data || []} avatar={avatar} />
        </Card> : <Card
            styles={{
                body: { minWidth, height, minHeight, maxHeight, overflow: 'auto', padding: 0, backgroundColor: backgroundColor ? backgroundColor : token.colorBgBase },
                header: { padding: '5px 10px', backgroundColor: backgroundColor ? backgroundColor : token.colorBgTextHover }
            }}
            title={<div className={style.title}>
                <LeftOutlined />
                <div className={style.name}>
                    <Typography.Title level={5} style={{ margin: 0, lineHeight: 'normal' }}>朋友圈</Typography.Title>
                </div>
                <CameraOutlined />
            </div>}
        >
            <LookPyq content={content} avatar={avatar} title={title} subTitle={subTitle} />
        </Card>}
    </div>
}

export default React.memo(PreviewMsg)