import React, { useState } from 'react';
import '../../page/corpUserManage/global.less'
import useNewToken from '@/Hook/useNewToken';
import { DefaultOptionType } from 'antd/es/select';
import SelectMpCorp from '../../page/groupChatSend/official/create/components/SelectMpCorp';
import { Tag, Tooltip } from 'antd';

interface GroupChatGroupsProps {
    corpList: DefaultOptionType[]
    mpList: DefaultOptionType[]
    value?: OFFICIAL_CHAT_CREATE.GroupsProps[];
    onChange?: (value?: OFFICIAL_CHAT_CREATE.GroupsProps[]) => void;
    placeholder?: React.ReactNode
    isOwnerUser?: boolean  // 是否可选择群主
    disabled?: boolean
}

/**
 * 群发组配置
 * @param param0 
 * @returns 
 */
const GroupChatGroups: React.FC<GroupChatGroupsProps> = ({ corpList, mpList, value, onChange, placeholder, isOwnerUser, disabled }) => {

    /************************************************************/
    const { token } = useNewToken()
    const [visible, setVisible] = useState<boolean>(false);
    /************************************************************/

    return <>
        <div
            className='selectCorpUser'
            style={{
                border: `1px solid ${token.colorBorder}`,
                padding: `0px ${token.paddingXS}px`,
                borderRadius: token.borderRadius,
                height: token.controlHeight,
            }}
            onClick={() => {
                setVisible(true)
            }}
        >
            <div className='selectCorpUserContent'>
                {(value && value?.length > 0) ? <>
                    <Tag
                        closable={!disabled}
                        onClose={(e) => {
                            e.preventDefault();
                            const newData = value?.filter((_, i) => i !== 0)
                            onChange(newData)
                        }}
                    >
                        {value?.[0]?.mpAccount?.label || '群发组1'}
                    </Tag>
                    {value?.length > 1 && <Tooltip
                        color="#FFF"
                        title={<span style={{ color: '#000' }}>
                            {value?.filter((_, index) => index !== 0)?.map((item, index) => <Tag
                                key={index}
                                closable={!disabled}
                                onClose={(e) => {
                                    e.stopPropagation()
                                    const newData = value?.filter((_, i) => i !== index + 1)
                                    onChange(newData)
                                }}
                            >{item?.mpAccount?.label || `群发组${index + 2}`}</Tag>)}</span>
                        }
                    >
                        <Tag>+{value.length - 1} ...</Tag>
                    </Tooltip>}
                </> : <span style={{ color: token.colorTextDisabled }}>{placeholder || '请选择主体'}</span>}
            </div>
        </div>

        {/* 选择关联主体 */}
        {visible && <SelectMpCorp
            isOwnerUser={isOwnerUser}
            corpList={corpList}
            mpList={mpList}
            visible={visible}
            group={value}
            disabled={disabled}
            onChange={(group) => {
                onChange?.(group)
                setVisible(false)
            }}
            onClose={() => {
                setVisible(false)
            }}
        />}
    </>;
};

export default GroupChatGroups;