import { Button } from 'antd';
import React, { useState } from 'react';
import SettingsEnterprise from './settingsEnterprise';


interface SelectKFProps {
    adAccountId: number; // 广告账号ID
    data: {
        label: string;
        value: string;
    };
    value?: { userId: string, userName: string }[]; // 选中的客服ID
    onChange?: (value?: { userId: string, userName: string }[]) => void;
}

const SelectKF: React.FC<SelectKFProps> = ({ adAccountId, data, value, onChange }) => {
    
    /*************************************/
    const [visible, setVisible] = useState<boolean>(false);
    /*************************************/

    return <>
        <Button type="primary" onClick={() => setVisible(true)}>{(value && value?.length > 0) ? '重新选择' : '选择客服'}</Button>
        {(value && value?.length > 0) && <div style={{ display: 'flex', marginTop: 8, flexDirection: 'column' }}>
            <p style={{ marginBottom: 2 }}>已选客服：</p>
            <div>{value.map(item => {
                return <div key={item.userId}>{item.userName + `（${item.userId}）`}</div>
            })}</div>
        </div>}

        {visible && <SettingsEnterprise
            adAccountId={adAccountId}
            visible={visible}
            value={value}
            data={{ corpName: data.label, tencentCorpId: data.value }}
            onClose={() => setVisible(false)}
            onChange={(value) => {
                onChange?.(value?.map(item => ({ userId: item.userId, userName: item.userName })));
                setVisible(false)
            }}
        />}
    </>
};

export default React.memo(SelectKF);