import React, { useContext, useState } from 'react'
import style from '../index.less'
import { Button, Empty, Typography } from 'antd'
import { DispatchAddelivery } from '..';
import { PlusCircleOutlined } from '@ant-design/icons';
import PageModal from '@/pages/launchSystemV3/components/PageModal';
const { Title, Text } = Typography;

/**
 * 落地页
 * @returns 
 */
const PageList: React.FC = () => {

    /********************************/
    const { addelivery, accountCreateLogs, setAccountCreateLogs, clearData } = useContext(DispatchAddelivery)!;
    const { dynamic } = addelivery

    const [addVisible, setAddVisible] = useState<boolean>(false)
    /********************************/

    return <div className={`${style.settingsBody_content_row} ${style.row6}`}>
        <div className={style.title}>
            <span>落地页</span>
        </div>
        <div className={style.detail}>
            <div className={style.detail_body}>
                {accountCreateLogs?.map((item, index) => {
                    return <div key={index}>
                        <Title level={5} style={{ fontSize: 12 }}>{item.accountId}</Title>
                        {item?.pageList?.length ?
                            item?.pageList?.map((page: { pageName: string, id: number }) => <div key={page.id} className={style.text}><Text ellipsis={{ tooltip: true }}>{page['pageName']}</Text></div>) :
                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ margin: 0, fontSize: 12 }} imageStyle={{ height: 18 }} />}
                    </div>
                })}
            </div>
            <div className={style.detail_footer}>
                <Button disabled={!(dynamic && Object.keys(dynamic)?.length > 0)} type="link" icon={<PlusCircleOutlined />} style={{ padding: 0, fontSize: 12 }} onClick={() => setAddVisible(true)}>添加</Button>
            </div>
        </div>

        {addVisible && <PageModal
            data={accountCreateLogs}
            visible={addVisible}
            onClose={() => {
                setAddVisible(false)
            }}
            onChange={(e) => {
                setAccountCreateLogs(e);
                setAddVisible(false);
                clearData()
            }}
        />}
    </div>
}

export default React.memo(PageList)