import useNewToken from '@/Hook/useNewToken';
import React, { useEffect, useState } from 'react';
import './global.less'
import SelectCorpUserGroupModal from './selectCorpUserGroupModal';
import { Tag, Tooltip } from 'antd';


export type CorpUserProps = { corpUserId: string, name: string, corpName: string, corpId: string }
interface SelectCorpUserGroupProps {
    value?: TASK_CREATE.CorpUserGroupProps[];
    onChange?: (value?: TASK_CREATE.CorpUserGroupProps[]) => void;
    placeholder?: React.ReactNode
    disabled?: boolean
}

/**
 * 分组选择企微账号
 * @param param0 
 * @returns 
 */
const SelectCorpUserGroup: React.FC<SelectCorpUserGroupProps> = ({ placeholder, value = [{ corpUsers: [] }], onChange, disabled }) => {

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

    useEffect(() => {
        const newCorpUserList = value?.map(item => item.corpUsers).flat(1)
        if (JSON.stringify(newCorpUserList) !== JSON.stringify(corpUserList)) {
            setCorpUserList(newCorpUserList)
        }
    }, [value, corpUserList])

    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'>
                {(corpUserList && corpUserList?.length > 0) ? <>
                    <Tag
                        closable={!disabled}
                        onClose={(e) => {
                            e.preventDefault();
                            const newData = value?.map(item => ({ ...item, corpUsers: item.corpUsers?.filter(item => item.corpUserId !== corpUserList?.[0]?.corpUserId) }))?.filter(item => item?.corpUsers?.length > 0)
                            onChange(newData)
                        }}
                    >
                        {corpUserList?.[0]?.name || corpUserList?.[0]?.corpUserId}
                    </Tag>
                    {corpUserList?.length > 1 && <Tooltip
                        color="#FFF"
                        title={<span style={{ color: '#000' }}>
                            {corpUserList?.filter((_, index) => index !== 0)?.map((item) => <Tag
                                key={item.corpUserId}
                                closable={!disabled}
                                onClose={(e) => {
                                    e.stopPropagation()
                                    const newData = value?.map(ii => ({ ...ii, corpUsers: ii.corpUsers?.filter(i => i.corpUserId !== item.corpUserId) }))?.filter(item => item?.corpUsers?.length > 0)
                                    onChange(newData)
                                }}
                            >{item.name || item?.corpUserId}</Tag>)}</span>
                        }
                    >
                        <Tag>+{corpUserList.length - 1} ...</Tag>
                    </Tooltip>}
                </> : <span style={{ color: token.colorTextDisabled }}>{placeholder || '请选择客服号'}</span>}
            </div>
        </div>

        {visible && <SelectCorpUserGroupModal
            visible={visible}
            value={value}
            disabled={disabled}
            onClose={() => setVisible(false)}
            onChange={(value) => {
                setVisible(false)
                onChange?.(value)
            }}
        />}
    </>
};

export default React.memo(SelectCorpUserGroup);