import { Button, Dropdown, Menu } from "antd";
import React, { useEffect, useState } from "react";
import style from './index.less'
import SelectAccount from "./selectAccount";
import { getChannelName } from '@/utils/utils'

type Props = {
    onChange: (value: { MP?: any, ADQ?: any, id: number, accountName: string }[]) => void,
    value: { MP?: any, ADQ?: any, id: number, accountName: string }[]
}

function InputAcc(props: Props) {
    const { value = [], onChange } = props

    const [selectAccShow, setSelectAccShow] = useState<boolean>(false)
    const [data, setData] = useState<{ title: String, num: Number }>({ title: '', num: 0 })

    useEffect(() => {
        if (value.length > 0) {
            let num = 0
            let title = ""
            for (const iterator of value) {
                if (iterator?.MP?.length > 0) {
                    title = getChannelName(iterator.accountName) + '-' + iterator?.MP[0].uname
                    break
                }
            }
            value?.forEach((item: any) => {
                if(item?.MP?.length > 0) {
                    num += item?.MP?.length
                }
            })
            setData(() => ({ title, num: num !==0 ? num - 1 : 0 }))
        }
    }, [value])

    const menu = () => {
        return <Menu style={{ width: 220, borderRadius: 4 }}>
            {value?.map((item: { id: number, accountName: string, MP?: any[], ADQ?: any[] }) => {
                if ((item?.MP && item?.MP?.length > 0) || (item?.ADQ && item?.ADQ?.length > 0)) {
                    return <div key={item?.id}>
                        {item?.MP && item?.MP?.length > 0 && item?.MP?.map((mp: { id: number, uname: string }) => <Menu.Item style={{ cursor: 'default' }} key={mp?.id} className={style.acc}>
                            <div className={style.cc}>
                                <span>{getChannelName(item?.accountName)}-{mp?.uname}</span>
                            </div>
                        </Menu.Item>)}
                    </div>
                } else {
                    return null
                }
            })}
        </Menu>
    }

    return <>
        {selectAccShow && <SelectAccount show={selectAccShow} onClose={() => { setSelectAccShow(false) }} onChange={(e: any) => { onChange(e); setSelectAccShow(false) }} channelAccounts={value} />}
        {value?.some((item: any) => (item?.MP?.length > 0 || item?.ADQ?.length > 0)) ? <div className={style.inputAcc}>
            <Dropdown overlay={menu} trigger={['click']}>
                <div className={style.acc}>
                    {data.title} {data.num > 0 && <span>+{data.num}</span>}
                </div>
            </Dropdown>

            <Button type="text" className={style.edit} size="small" onClick={() => { setSelectAccShow(true) }}>修改</Button>
        </div> : <Button type="primary" className={style.edit} size="small" onClick={() => { setSelectAccShow(true) }}>选择公众号</Button>}
    </>
}

export default React.memo(InputAcc)