import { Input, Select, Typography } from "antd";
import { AnyObject } from "antd/es/_util/type"
import { ColumnsType } from "antd/es/table"
import { TIME_TYPE, welcomeContentData } from "../../../businessPlan/create/const";
import FilterUser from "@/pages/weComTask/components/filterUser";
import ShowContentTable from "../../../businessPlan/create/components/massSending/showContentTable";
import SelectBookLinkButton from "../../../bookLink/SelectBookLinkButton";
import { DefaultOptionType } from "antd/es/select";
import SelectGroupChat from "@/pages/weComTask/API/SelectGroupChat";
const { Paragraph, Title } = Typography;


export const PreviewColumns = (
    corpList: DefaultOptionType[],
    bookPlatForm: TASK_CREATE.BookPlatFormProps[],
    bookList: TASK_CREATE.BookListProps[],
    platform: string,
    setPreviewContent: React.Dispatch<React.SetStateAction<{ [x: string]: { [x: string]: string; }; }>>,
    previewContent: { [x: string]: { [x: string]: string } },
    corpGroupChat: { [x: string]: any },
    setCorpGroupChat: React.Dispatch<React.SetStateAction<{ [x: string]: any; }>>
): ColumnsType<AnyObject> => {

    return [
        {
            title: '群聊关注公众号',
            dataIndex: 'mpAccountName',
            key: 'mpAccountName',
            width: 120,
            ellipsis: true,
            render(value) {
                return value || '--'
            },
            onCell: (record) => {
                return { rowSpan: record.mpRowSpan }
            }
        },
        {
            title: '企微主体',
            dataIndex: 'corpNames',
            key: 'corpNames',
            width: 160,
            ellipsis: true,
            render(value) {
                return value ? value.join('、') : '--'
            },
            onCell: (record) => {
                return { rowSpan: record.mpRowSpan }
            }
        },
        {
            title: '基础信息',
            dataIndex: 'groupSendName',
            key: 'groupSendName',
            width: 130,
            render(value, record) {
                return <>
                    <Title level={5} style={{ margin: 0 }}>任务名称：{value}</Title>
                    {record?.bizType && <Paragraph style={{ margin: 0 }}>业务类型：{record?.bizType === 'novel' ? '小说' : record?.bizType === 'game' ? '游戏' : '<空>'}</Paragraph>}
                    {record?.platform && <Paragraph style={{ margin: 0 }}>书城：{record?.platform ? bookPlatForm?.find(item => item.id === record?.platform)?.platformName : '<空>'}</Paragraph>}
                    {record?.templateProductId && <Paragraph style={{ margin: 0 }}>适用产品：{record?.templateProductId ? bookList?.find(item => item.id === record?.templateProductId)?.bookName : '<空>'}</Paragraph>}
                </>
            },
            onCell: (record) => {
                return { rowSpan: record.mpRowSpan }
            }
        },
        {
            title: '策略信息',
            dataIndex: 'strategyData',
            key: 'strategyData',
            width: 200,
            render(value, record) {
                return <>
                    <Title level={5} style={{ margin: 0 }}>策略{record.strategyIndex + 1}</Title>
                    <Paragraph style={{ margin: 0 }}>名称：{value?.strategyName || '<空>'}</Paragraph>
                    <Paragraph style={{ margin: 0 }}>执行类型：{TIME_TYPE[value?.timeRepeatType]}</Paragraph>
                    {value?.sendDay && <Paragraph style={{ margin: 0 }}>执行时间：{value?.sendDay}</Paragraph>}
                    {value?.startTime && <Paragraph style={{ margin: 0 }}>执行日期：{value?.startTime}~{value?.endTime ? value?.endTime : '长期执行'}</Paragraph>}
                    {value?.sendTime && <Paragraph style={{ margin: 0 }}>执行时间：{value?.sendTime}</Paragraph>}
                    {value?.repeatArray && <Paragraph style={{ margin: 0 }}>执行天数：{value?.repeatArray.join('、')}</Paragraph>}
                </>
            },
            onCell: (record) => {
                return { rowSpan: record.strategyRowSpan }
            }
        },
        {
            title: '机器人',
            dataIndex: 'robotCorpName',
            key: 'robotCorpName',
            width: 160,
            ellipsis: true,
            render(value, record) {
                return value ? <div style={{ width: '100%' }}>
                    <Title level={5} ellipsis style={{ margin: 0 }}>主体：{value}</Title>
                    <Paragraph style={{ margin: 0 }} ellipsis>机器人号：{record?.robotCorpUser?.map(item => item.name)?.join('、') || '<空>'}</Paragraph>
                </div> : '--'
            },
            onCell: (record) => {
                return { rowSpan: record.contentRowSpan }
            }
        },
        {
            title: '发送对象',
            dataIndex: 'sendData',
            key: 'sendData',
            width: 200,
            render(value, record) {
                return <>
                    <Title level={5} style={{ margin: 0 }}>发送对象{record.sendIndex + 1}</Title>
                    <Paragraph style={{ margin: 0 }} ellipsis>名称：{value?.sendGroupName}</Paragraph>
                    <Paragraph style={{ margin: 0 }}>内容发送模式：{welcomeContentData?.find(i => i.value === value?.sendMode)?.label}</Paragraph>
                    <Paragraph style={{ margin: 0 }}>类型：{value?.externalUserType === 'all' ? '全部' : '指定'}</Paragraph>
                    {value?.externalUserType === 'specify' && <FilterUser isSHow value={value?.externalUserFilter} configType='USER_GROUP' />}
                </>
            },
            onCell: (record) => {
                return { rowSpan: record.contentRowSpan }
            }
        },
        {
            title: '素材群主体',
            dataIndex: 'chatCorpId',
            key: 'chatCorpId',
            width: 250,
            render(_, record) {
                const key = record.mpIndex + '_' + record.strategyIndex + '_' + record.sendIndex
                return <Select
                    showSearch
                    allowClear
                    placeholder="选择素材群主体"
                    filterOption={(input, option) =>
                        (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    style={{ width: '100%' }}
                    options={corpList}
                    value={corpGroupChat?.[key]?.chatCorpId}
                    onChange={(e) => {
                        const newCorpGroupChat = JSON.parse(JSON.stringify(corpGroupChat))
                        const c = corpGroupChat?.[key] || {}
                        newCorpGroupChat[key] = { ...c, chatCorpId: e }
                        setCorpGroupChat(newCorpGroupChat)
                    }}
                />
            },
            onCell: (record) => {
                return { rowSpan: record.contentRowSpan }
            }
        },
        {
            title: '素材群',
            dataIndex: 'corpGroupChat',
            key: 'corpGroupChat',
            width: 250,
            render(_, record) {
                const key = record.mpIndex + '_' + record.strategyIndex + '_' + record.sendIndex
                return corpGroupChat?.[key]?.chatCorpId ? <SelectGroupChat
                    corpId={corpGroupChat?.[key]?.chatCorpId}
                    value={corpGroupChat?.[key]?.corpGroupChat as any}
                    onChange={(e) => {
                        const newCorpGroupChat = JSON.parse(JSON.stringify(corpGroupChat))
                        const c = corpGroupChat?.[key] || {}
                        newCorpGroupChat[key] = { ...c, corpGroupChat: e }
                        setCorpGroupChat(newCorpGroupChat)
                    }}
                /> : <span>请先选择素材群主体</span>
            },
            onCell: (record) => {
                return { rowSpan: record.contentRowSpan }
            }
        },
        {
            title: '发送内容',
            dataIndex: 'content',
            key: 'content',
            width: 200,
            render(value, record) {
                return <>
                    <ShowContentTable
                        data={value}
                        name={<><span>内容{record.contentIndex + 1}：</span><span dangerouslySetInnerHTML={{ __html: record.contentReactNode?.map((item) => item).join('、') }}></span></>}
                    />
                </>
            },
        },
        {
            title: '图文链接',
            dataIndex: 'linkUrl',
            key: 'linkUrl',
            width: 250,
            render(_, record) {
                const linkUrl = previewContent?.[record.id]?.linkUrl
                return record?.linkData?.length > 0 ? <div style={{ display: 'flex', gap: 4, alignItems: 'flex-end' }}>
                    <Input.TextArea
                        placeholder="请输入链接"
                        allowClear
                        value={linkUrl}
                        onChange={e => {
                            const newPreviewContent = JSON.parse(JSON.stringify(previewContent))
                            const c = previewContent?.[record.id] || {}
                            newPreviewContent[record.id] = { ...c, linkUrl: e.target.value }
                            setPreviewContent(newPreviewContent)
                        }}
                    />
                    <SelectBookLinkButton
                        bookPlatForm={bookPlatForm}
                        platform={platform}
                        mpAccountId={record.mpAccountId}
                        linkData={record.linkData}
                        linkList={linkUrl ? {
                            type: 'link',
                            data: linkUrl.split(',')
                        } : undefined}
                        onChange={(linkStr, miniprogramAppid, miniprogramPage) => {
                            const msg: { [x: string]: string } = { linkUrl: linkStr }
                            if (miniprogramAppid && miniprogramPage && record?.miniProgramData?.length > 0 && !previewContent?.[record.id]?.miniprogramAppid && !previewContent?.[record.id]?.miniprogramPage) {
                                msg.miniprogramAppid = miniprogramAppid
                                msg.miniprogramPage = miniprogramPage
                            }
                            const newPreviewContent = JSON.parse(JSON.stringify(previewContent))
                            const c = previewContent?.[record.id] || {}
                            newPreviewContent[record.id] = { ...c, ...msg }
                            setPreviewContent(newPreviewContent)
                        }}
                    />
                </div> : '--'
            },
        },
        {
            title: '小程序APPID',
            dataIndex: 'miniprogramAppid',
            key: 'miniprogramAppid',
            width: 200,
            render(_, record) {
                return record?.miniProgramData?.length > 0 ? <Input.TextArea
                    placeholder="请输入小程序APPID"
                    allowClear
                    value={previewContent?.[record.id]?.miniprogramAppid}
                    onChange={e => {
                        const newPreviewContent = JSON.parse(JSON.stringify(previewContent))
                        const c = previewContent?.[record.id] || {}
                        newPreviewContent[record.id] = { ...c, miniprogramAppid: e.target.value }
                        setPreviewContent(newPreviewContent)
                    }}
                /> : '--'
            },
        },
        {
            title: '小程序路径',
            dataIndex: 'miniprogramPage',
            key: 'miniprogramPage',
            width: 250,
            render(_, record) {
                const miniprogramAppid = previewContent?.[record.id]?.miniprogramAppid
                const miniprogramPage = previewContent?.[record.id]?.miniprogramPage
                let linkList: {
                    type: 'link' | 'miniprogram',
                    data: any[]
                } = undefined
                if (miniprogramAppid && miniprogramPage) {
                    linkList = { type: 'miniprogram', data: [] }
                    const miniprogramPages = miniprogramPage.split(',')
                    miniprogramAppid.split(',').map((item, index) => {
                        linkList.data.push({
                            miniappId: item,
                            miniappPagePath: miniprogramPages?.[index]
                        })
                    })
                }
                return record?.miniProgramData?.length > 0 ? <div style={{ display: 'flex', gap: 4, alignItems: 'flex-end' }}>
                    <Input.TextArea
                        placeholder="请输入小程序路径"
                        allowClear
                        value={previewContent?.[record.id]?.miniprogramPage}
                        onChange={e => {
                            const newPreviewContent = JSON.parse(JSON.stringify(previewContent))
                            const c = previewContent?.[record.id] || {}
                            newPreviewContent[record.id] = { ...c, miniprogramPage: e.target.value }
                            setPreviewContent(newPreviewContent)
                        }}
                    />
                    <SelectBookLinkButton
                        bookPlatForm={bookPlatForm}
                        platform={platform}
                        mpAccountId={record.mpAccountId}
                        linkList={linkList}
                        linkData={record.miniProgramData.map(item => ({
                            msgType: "TASK_CONTENT_LINK",
                            link: {
                                title: item?.miniprogram?.title,
                                picUrl: item?.miniprogram?.picUrl,
                                desc: ''
                            }
                        }))}
                        onChange={(_, miniprogramAppid, miniprogramPage) => {
                            const msg: { [x: string]: string } = {}
                            if (miniprogramAppid && miniprogramPage) {
                                msg.miniprogramAppid = miniprogramAppid
                                msg.miniprogramPage = miniprogramPage
                                const newPreviewContent = JSON.parse(JSON.stringify(previewContent))
                                const c = previewContent?.[record.id] || {}
                                newPreviewContent[record.id] = { ...c, ...msg }
                                setPreviewContent(newPreviewContent)
                            }
                        }}
                    />
                </div> : '--'
            }
        }
    ]

}