import { App, Button, Card, Col, Space, Tag, Tooltip, Typography } from "antd"
import React, { useEffect, useState } from "react"
import style from './index.less'
import { DeleteOutlined } from '@ant-design/icons';
import { NewGlobalToken } from "@/Hook/useNewToken";
import { editMsgTemplateApi, MEDIATYPE } from "../../API/weMaterial/weMaterial";
import { useAjax } from "@/Hook/useAjax";
import EditTag from "./editTag";
import LookBox from "../../components/materialMould/lookBox";


interface Props {
    dataList: any[]
    onChange?: () => void
    token: NewGlobalToken
    value: any
    del?: (id: number, name: string) => void
    loading?: boolean
}
const Right: React.FC<Props> = ({ token, value, onChange, dataList, del }) => {

    /***************************/
    const [data, setData] = useState<any>({})
    const { corpMediaContentVOList, mediaTitle, mediaTagNames, mediaTagIds, id } = data
    const [mediaTypes, setMediaTypes] = useState<any>({})
    const { message } = App.useApp();
    const [openTag, setOpenTag] = useState<boolean>(false)

    const editMsgTemplate = useAjax((params) => editMsgTemplateApi(params))
    /***************************/

    useEffect(() => {
        let newData = dataList?.find(item => item.id === id)
        if (newData?.mediaTitle !== mediaTitle || mediaTagIds !== newData?.mediaTagIds) {
            setData(newData || {})
        }
    }, [dataList, mediaTitle, id, mediaTagIds])

    // 回填数据
    useEffect(() => {
        if (value) {
            setData(value)
        }
    }, [value])

    useEffect(() => {
        if (corpMediaContentVOList) {
            let newMediaTypes: string[] = corpMediaContentVOList.map((item: { mediaType: string }) => item.mediaType)
            let mediaTypesNum: { [x: string]: any } = {}
            newMediaTypes.forEach(mediaType => {
                if (mediaTypesNum?.[mediaType]) {
                    mediaTypesNum[mediaType] = mediaTypesNum[mediaType] + 1
                } else {
                    mediaTypesNum[mediaType] = 1
                }
            })
            setMediaTypes(mediaTypesNum)
        }
    }, [corpMediaContentVOList])

    return <Col flex='310px' className={style.weMaterial_right} style={{ borderLeft: `1px solid ${token.colorBorderSecondary}` }} >
        {openTag && <EditTag
            visible={openTag}
            onClose={() => setOpenTag(false)}
            value={mediaTagIds?.map((id: number, index: number) => ({ tagName: mediaTagNames[index], tagId: id }))}
            onChange={(data) => {
                editMsgTemplate.run({ id, data: { mediaTagIds: data?.map(item => item.tagId) } }).then(res => {
                    message.success('修改成功')
                    onChange?.()
                    setOpenTag(false)
                })
            }}
        />}
        <div className={style.right_top}>
            <Typography.Text
                strong
                ellipsis
                className={style.title}
                editable={{
                    triggerType: ['text'],
                    onChange: (e) => {
                        console.log(e);
                        if (e !== mediaTitle) {
                            editMsgTemplate.run({ id, data: { mediaTitle: e } }).then(res => {
                                message.success('修改成功')
                                onChange?.()
                            })
                        }
                    }
                }}
            >{mediaTitle}</Typography.Text>
            <Card styles={{ body: { padding: 10 } }}>
                <Space direction="vertical" style={{ width: '100%' }}>
                    <Typography.Text ellipsis={{ tooltip: true }} type='secondary'>{Object.keys(mediaTypes).map(key => `${mediaTypes[key]}个${MEDIATYPE[key as keyof typeof MEDIATYPE]}`).join(' ')}</Typography.Text>
                    {mediaTagNames && mediaTagNames?.length > 0 ? <div style={{ cursor: 'pointer', height: '28px', lineHeight: '28px' }} onClick={() => setOpenTag(true)}>
                        <Typography.Text ellipsis={{ tooltip: mediaTagNames.map((name: string, index: number) => name).join(' ') }}>{mediaTagNames.map((name: string, index: number) => <Tag key={index}>{name}</Tag>)}</Typography.Text>
                    </div> : <Button type="link" style={{ padding: 0, height: 28 }} onClick={() => setOpenTag(true)}>标签设置</Button>}
                </Space>
            </Card>
            <Card styles={{ body: { padding: 10, height: 'calc(100% - 44.33px)', overflow: 'auto' }, header: { padding: 10} }} style={{ height: 'calc(100% - 115px)' }} title='内容'>
                <LookBox data={corpMediaContentVOList} />
            </Card>
        </div>
        <div className={style.right_bottom} style={{ background: token.colorBgContainer, borderBottomRightRadius: token.borderRadius }}>
            <div><Tooltip title='删除'><Button type="text" icon={<DeleteOutlined />} onClick={() => { del?.(id, mediaTitle) }}></Button></Tooltip></div>
        </div>
    </Col>
}

export default React.memo(Right)