import React, { useState } from 'react';
import { Form, Input, Select, Modal, message } from 'antd';
import { DefaultOptionType } from 'antd/lib/select';
import { useAjax } from '@/Hook/useAjax';
import { addPlayerWhiteApi } from '@/services/gameData/roleOperate';


interface Props {
    gameList: DefaultOptionType[]
    visible?: boolean;
    onClose?: () => void;
    onChange?: () => void;
}

/**
 * 添加白名单
 * @param param0 
 * @returns 
 */
const AddWhite: React.FC<Props> = ({ gameList, visible, onClose, onChange }) => {

    /***********************************/
    const [form] = Form.useForm()

    const addPlayerWhite = useAjax((params) => addPlayerWhiteApi(params))
    /***********************************/

    const handleOk = () => {
        form.validateFields().then(value => {
            addPlayerWhite.run(value).then(res => {
                if (res) {
                    message.success('添加成功')
                    onChange?.()
                }
            })
        })
    }

    return <Modal
        title={<strong>添加白名单</strong>}
        visible={visible}
        onCancel={onClose}
        onOk={handleOk}
        confirmLoading={addPlayerWhite.loading}
    >
        <Form
            name="addWhiteList"
            layout="vertical"
            form={form}
        >
            <Form.Item
                label="游戏"
                name="gameId"
                rules={[{ required: true, message: '请选择游戏!' }]}
            >
                <Select
                    showSearch
                    style={{ minWidth: 140 }}
                    placeholder={'请选择游戏'}
                    filterOption={(input, option) =>
                        (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    options={gameList}
                />
            </Form.Item>
            <Form.Item
                label="玩家"
                name="account"
                rules={[{ required: true, message: '请输入玩家账号/手机号/id' }]}
            >
                <Input.TextArea placeholder="请输入玩家账号/手机号/id" />
            </Form.Item>
        </Form>
    </Modal>
};

export default AddWhite;