import { Button, Input, Modal, Typography } from 'antd';
import React, { useEffect, useState } from 'react';
import style from '../../../../../components/selectExternalAccount/index.less'
import { CheckOutlined } from '@ant-design/icons';
import SelectBookLinkButton from '@/pages/weComTask/page/bookLink/SelectBookLinkButton';
const { Paragraph, Title } = Typography;


interface Props {
    corpUserGroups: TASK_CREATE.CorpUserGroupProps[]
    content: Array<{ msgType: "TASK_CONTENT_LINK", link: { title: string, picUrl: string, desc: string } } | { msgType: "TASK_STATUS_MINIPROGRAM", miniprogram: { title: string, picUrl: string } }>
    bookPlatForm: TASK_CREATE.BookPlatFormProps[]
    value?: any[];
    onChange?: (value?: any) => void;
}
const SettingsContent: React.FC<Props> = ({ value, onChange, content, bookPlatForm, corpUserGroups }) => {

    /*******************************************/
    const [visible, setVisible] = useState<boolean>(false)
    const [data, setData] = useState<any>([])
    /*******************************************/

    useEffect(() => {
        if (visible) {
            setData(value || corpUserGroups.map(() => {
                return {
                    content
                }
            }))
        }
    }, [visible, corpUserGroups, value])



    return <>
        <Button onClick={() => setVisible(true)}>设置链接、小程序</Button>
        {visible && <SettingsContentModal
            corpUserGroups={corpUserGroups}
            visible={visible}
            value={data}
            bookPlatForm={bookPlatForm}
            onChange={(value) => {
                setData(value)
                onChange(value)
            }}
            onClose={() => {
                setVisible(false)
            }}
        />}
    </>
};

const SettingsContentModal: React.FC<{
    value: any[],
    onChange: (value: any) => void
    onClose: () => void
    corpUserGroups: TASK_CREATE.CorpUserGroupProps[]
    bookPlatForm: TASK_CREATE.BookPlatFormProps[]
    visible?: boolean
}> = ({ visible, onClose, onChange, value, corpUserGroups, bookPlatForm }) => {

    /***************************************/
    const [data, setData] = useState<any>([])
    const [selectAdz, setSelectAdz] = useState<number>(1)
    /***************************************/

    useEffect(() => {
        if (visible) {
            setData(value)
        }
    }, [visible, value])

    const handleSelectAdz = (value: number) => {
        if (value === selectAdz) {
            return
        }
        setSelectAdz(value)
    }

    return <Modal
        title={<strong>群发内容链接、小程序配置</strong>}
        open={visible}
        onCancel={onClose}
        width={800}
        className={`${style.SelectPackage}`}
        styles={{
            body: {
                padding: '0 10px 0 10px'
            }
        }}
    >
        <div className={style.content}>
            <div className={style.left}>
                <h4 className={style.title}>客服组</h4>
                <div className={style.accountIdList}>
                    {data?.map((item, index) => {
                        // const bookLink = item?.bookLink
                        return <div style={{ height: 'auto', lineHeight: 'normal', }} key={index} onClick={() => { handleSelectAdz(index + 1) }} className={`${style.accItem} ${selectAdz === index + 1 && style.select} `}>
                            <div style={{ flexDirection: 'column', alignItems: 'flex-start', padding: '2px 0', flex: 1, overflow: 'hidden' }}>
                                <Title ellipsis={{ tooltip: true }} level={5} style={{ margin: 0 }}>客服组{index + 1}</Title>
                                <Paragraph ellipsis={{ tooltip: true }} style={{ margin: 0, width: '100%' }}>{corpUserGroups[index]?.corpUsers?.map(i => i.name).join('、')}</Paragraph>
                            </div>
                            {/* {bookLink?.length > 0 && <CheckOutlined style={{ color: '#1890ff' }} />} */}
                            <CheckOutlined style={{ color: '#1890ff' }} />
                        </div>
                    })}
                </div>
            </div>
            <div className={style.right}>
                {data?.[selectAdz - 1]?.content?.map((item, index) => {
                    return <div key={index}>
                        {item.msgType === 'TASK_CONTENT_LINK' ? <div style={{ marginBottom: 10 }}>
                            <Title level={5} style={{ margin: 0 }}>链接：{item?.link?.title || ''}</Title>
                            <div style={{ display: 'flex', gap: 4, alignItems: 'flex-end' }}>
                                <Input.TextArea placeholder="请输入链接" />
                                {/* <SelectBookLinkButton
                                    bookPlatForm={bookPlatForm}
                                    mpAccountId={corpUserGroups[index]?.corpUsers?.[0]?.mpAccountId}
                                    linkData={[item]}
                                    onChange={(linkStr, miniprogramAppid, miniprogramPage) => {
                                        
                                    }}
                                /> */}
                            </div>
                        </div> : <>
                            <Title level={5} style={{ margin: 0 }}>所有小程序</Title>
                            <Input.TextArea placeholder="请输入链接" />
                        </>}
                    </div>
                })}
            </div>
        </div>
    </Modal>
}

export default SettingsContent;