/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, { useState, useEffect } from 'react';
import {
    Table,
    Button,
    Input,
    Tabs,
    Modal,
    Form,
    message,
    Space,
    Tag,
    Popconfirm,
    Select
} from 'antd';
import {
    EditOutlined,
    DeleteOutlined,
    EyeOutlined,
    EyeInvisibleOutlined
} from '@ant-design/icons';
import {remoteApi} from "../../api/remoteApi/remoteApi";
import ResourceInput from '../../components/acl/ResourceInput';
import SubjectInput from "../../components/acl/SubjectInput";
import {useLanguage} from "../../i18n/LanguageContext";
const { TabPane } = Tabs;
const { Search } = Input;

const Acl = () => {
    const [activeTab, setActiveTab] = useState('users');
    const [userListData, setUserListData] = useState([]);
    const [aclListData, setAclListData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [searchText, setSearchText] = useState('');

    const [isUserModalVisible, setIsUserModalVisible] = useState(false);
    const [currentUser, setCurrentUser] = useState(null);
    const [userForm] = Form.useForm();
    const [showPassword, setShowPassword] = useState(false);

    const [isAclModalVisible, setIsAclModalVisible] = useState(false);
    const [currentAcl, setCurrentAcl] = useState(null);
    const [aclForm] = Form.useForm();
    const [messageApi, msgContextHolder] = message.useMessage();
    const [isUpdate, setIsUpdate] = useState(false);
    const [ips, setIps] = useState([]);
    const {t} = useLanguage();
    // 校验IP地址的正则表达式
    const ipRegex =
        /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$|^((?:[0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){6}[0-9A-Fa-f]{1,4}(?::[0-9A-Fa-f]{1,4}){0,1}|(?:[0-9A-Fa-f]{1,4}:){5}[0-9A-Fa-f]{1,4}(?::[0-9A-Fa-f]{1,4}){0,2}|(?:[0-9A-Fa-f]{1,4}:){4}[0-9A-Fa-f]{1,4}(?::[0-9A-Fa-f]{1,4}){0,3}|(?:[0-9A-Fa-f]{1,4}:){3}[0-9A-Fa-f]{1,4}(?::[0-9A-Fa-f]{1,4}){0,4}|(?:[0-9A-Fa-f]{1,4}:){2}[0-9A-Fa-f]{1,4}(?::[0-9A-Fa-f]{1,4}){0,5}|(?:[0-9A-Fa-f]{1,4}:){1}[0-9A-Fa-f]{1,4}(?::[0-9A-Fa-f]{1,4}){0,6}|(?::(?::[0-9A-Fa-f]{1,4}){1,7}|::))(\/(?:12[0-7]|1[0-1][0-9]|[1-9]?[0-9]))?$/;
    // 支持 IPv4 和 IPv6，包括 CIDR 表示法
    // State to store the entire clusterInfo object for easy access
    const [clusterData, setClusterData] = useState(null);

    // State for the list of available cluster names for the dropdown
    const [clusterNamesOptions, setClusterNamesOptions] = useState([]);

    // State for the currently selected cluster name
    const [selectedCluster, setSelectedCluster] = useState(undefined);

    // State for the list of available broker names for the dropdown (depends on selectedCluster)
    const [brokerNamesOptions, setBrokerNamesOptions] = useState([]);

    // State for the currently selected broker name
    const [selectedBroker, setSelectedBroker] = useState(undefined);

    // State for the address of the selected broker
    const [brokerAddress, setBrokerAddress] = useState(undefined);

    // --- Data Fetching and Initial Setup ---
    useEffect(() => {
        const fetchData = async () => {
            const clusterResponse = await remoteApi.getClusterList();
            if (clusterResponse.status === 0 && clusterResponse.data) {
                const { clusterInfo } = clusterResponse.data;
                setClusterData(clusterInfo); // Store the entire clusterInfo

                // Populate cluster names for the first dropdown
                const clusterNames = Object.keys(clusterInfo?.clusterAddrTable || {});
                setClusterNamesOptions(clusterNames.map(name => ({ label: name, value: name })));

                // Set initial selections if clusters are available
                if (clusterNames.length > 0) {
                    const defaultCluster = clusterNames[0];
                    setSelectedCluster(defaultCluster);

                    // Manually trigger broker list update for the default cluster
                    updateBrokerOptions(defaultCluster, clusterInfo);

                    // Set default broker and its address if available
                    const brokersInDefaultCluster = clusterInfo.clusterAddrTable[defaultCluster] || [];
                    if (brokersInDefaultCluster.length > 0) {
                        const defaultBroker = brokersInDefaultCluster[0];
                        setSelectedBroker(defaultBroker);
                        // Get the address from brokerAddrTable using the defaultBroker name
                        const addr = clusterInfo.brokerAddrTable?.[defaultBroker]?.brokerAddrs?.["0"];
                        setBrokerAddress(addr);
                    }
                }

            } else {
                console.error('Failed to fetch cluster list:', clusterResponse.errMsg);
            }
        };
        if(!clusterData){
            fetchData();
        }
        if(brokerAddress){
            // Call fetchUsers or fetchAcls based on activeTab initially
            if (activeTab === 'users') {
                fetchUsers();
            } else {
                fetchAcls();
            }
        }

    }, [activeTab]); // Dependencies for useEffect

    // --- Helper function to update broker options based on selected cluster ---
    const updateBrokerOptions = (clusterName, info = clusterData) => {
        if (!info || !info.clusterAddrTable) {
            setBrokerNamesOptions([]);
            return;
        }
        const brokersInCluster = info.clusterAddrTable[clusterName] || [];
        setBrokerNamesOptions(brokersInCluster.map(broker => ({ label: broker, value: broker })));
    };

    // --- Event Handlers ---
    const handleClusterChange = (value) => {
        setSelectedCluster(value);
        setSelectedBroker(undefined); // Reset broker selection
        setBrokerAddress(undefined); // Reset broker address

        // Update the broker options based on the newly selected cluster
        updateBrokerOptions(value);
    };

    const handleBrokerChange = (value) => {
        setSelectedBroker(value);
        // Find the corresponding broker address from clusterData
        if (clusterData && clusterData.brokerAddrTable && clusterData.brokerAddrTable[value]) {
            const addr = clusterData.brokerAddrTable[value].brokerAddrs?.["0"];
            setBrokerAddress(addr);
        } else {
            setBrokerAddress(undefined);
        }
    };

    // --- Log selected values for debugging (optional) ---
    useEffect(() => {
        console.log('Selected Cluster:', selectedCluster);
        console.log('Selected Broker:', selectedBroker);
        console.log('Broker Address:', brokerAddress);
    }, [selectedCluster, selectedBroker, brokerAddress]);
    const handleIpChange = value => {
        // 过滤掉重复的IP地址
        const uniqueIps = Array.from(new Set(value));
        setIps(uniqueIps);
    };

    const handleIpDeselect = value => {
        // 移除被取消选择的IP
        setIps(ips.filter(ip => ip !== value));
    };

    const validateIp = (rule, value) => {
        if (!value || value.length === 0) {
            return Promise.resolve(); // Allow empty
        }
        const invalidIps = value.filter(ip => !ipRegex.test(ip));
        if (invalidIps.length > 0) {
            return Promise.reject(t.INVALID_IP_ADDRESSES +"ips:" + invalidIps.join(', '));
        }
        return Promise.resolve();
    };

// --- Data Loading Functions ---
    const fetchUsers = async () => {
        setLoading(true);
        try {
            const result = await remoteApi.listUsers(brokerAddress);
            if (result && result.status === 0 && result.data) {
                const formattedUsers = result.data.map(user => ({
                    ...user,
                    key: user.username, // Table needs key
                    userStatus: user.userStatus === 'enable' ? t.ENABLED : t.DISABLED // Format status
                }));
                setUserListData(formattedUsers);
            } else {
                messageApi.error(t.GET_USERS_FAILED+result?.errMsg);
            }
        } catch (error) {
            console.error("Failed to fetch users:", error);
            messageApi.error(t.GET_USERS_EXCEPTION);
        } finally {
            setLoading(false);
        }
    };

    const fetchAcls = async (value) => {
        setLoading(true);
        try {
            const result = await remoteApi.listAcls(brokerAddress, value);
            if (result && result.status === 0) {
                const formattedAcls = [];

                if (result && result.data && Array.isArray(result.data)) {
                    result.data.forEach((acl, aclIndex) => {
                        const subject = acl.subject;

                        if (acl.policies && Array.isArray(acl.policies)) {
                            acl.policies.forEach((policy, policyIndex) => {
                                const policyType = policy.policyType;

                                if (policy.entries && Array.isArray(policy.entries)) {
                                    policy.entries.forEach((entry, entryIndex) => {
                                        const resources = Array.isArray(entry.resource) ? entry.resource : (entry.resource ? [entry.resource] : []);

                                        resources.forEach((singleResource, resourceIndex) => {
                                            console.log(singleResource)
                                            formattedAcls.push({
                                                key: `acl-${aclIndex}-policy-${policyIndex}-entry-${entryIndex}-resource-${singleResource}`,
                                                subject: subject,
                                                policyType: policyType,
                                                resource: singleResource || t.N_A,
                                                actions: (entry.actions && Array.isArray(entry.actions)) ? entry.actions.join(', ') : '',
                                                sourceIps: (entry.sourceIps && Array.isArray(entry.sourceIps)) ? entry.sourceIps.join(', ') : t.N_A,
                                                decision: entry.decision || t.N_A
                                            });
                                        });
                                    });
                                }
                            });
                        }
                    });
                } else {
                    console.warn(t.INVALID_OR_EMPTY_ACL_DATA);
                }
                setAclListData(formattedAcls);
            } else {
                messageApi.error(t.GET_ACLS_FAILED + result?.errMsg);
            }
        } catch (error) {
            console.error("Failed to fetch ACLs:", error);
            messageApi.error(t.GET_ACLS_EXCEPTION);
        } finally {
            setLoading(false);
        }
    };


// --- User Management Logic ---

    const handleAddUser = () => {
        setCurrentUser(null);
        userForm.resetFields();
        setShowPassword(false);
        setIsUserModalVisible(true);
    };

    const handleEditUser = (record) => {
        setCurrentUser(record);
        userForm.setFieldsValue({
            username: record.username,
            password: record.password,
            userType: record.userType,
            userStatus: record.userStatus === t.ENABLED ? 'enable' : 'disable'
        });
        setShowPassword(false);
        setIsUserModalVisible(true);
    };

    const handleDeleteUser = async (username) => {
        setLoading(true);
        try {
            const result = await remoteApi.deleteUser(brokerAddress, username);
            if (result.status === 0) {
                messageApi.success(t.USER_DELETE_SUCCESS);
                fetchUsers(brokerAddress);
            } else {
                messageApi.error(t.USER_DELETE_FAILED + result.errMsg);
            }
        } catch (error) {
            console.error("Failed to delete user:", error);
            messageApi.error(t.USER_DELETE_EXCEPTION);
        } finally {
            setLoading(false);
        }
    };

    const handleUserModalOk = async () => {
        try {
            const values = await userForm.validateFields();
            setLoading(true);
            let result;

            const userInfoParam = {
                username: values.username,
                password: values.password,
                userType: values.userType,
                userStatus: values.userStatus,
            };

            if (currentUser) {
                result = await remoteApi.updateUser(brokerAddress, userInfoParam);
                if (result.status === 0) {
                    messageApi.success(t.USER_UPDATE_SUCCESS);
                } else {
                    messageApi.error(result.errMsg);
                }
            } else {
                result = await remoteApi.createUser(brokerAddress, userInfoParam);
                if (result.status === 0) {
                    messageApi.success(t.USER_CREATE_SUCCESS);
                } else {
                    messageApi.error(result.errMsg);
                }
            }
            setIsUserModalVisible(false);
            fetchUsers();
        } catch (error) {
            console.error("Failed to save user:", error);
            messageApi.error(t.SAVE_USER_FAILED);
        } finally {
            setLoading(false);
        }
    };

// --- ACL Permission Management Logic ---
    const handleAddAcl = () => {
        setCurrentAcl(null);
        setIsUpdate(false)
        aclForm.resetFields();
        setIsAclModalVisible(true);
    };

    const handleEditAcl = (record) => {
        setCurrentAcl(record);
        setIsUpdate(true);
        aclForm.setFieldsValue({
            subject: record.subject,
            policyType: record.policyType,
            resource: record.resource,
            actions: record.actions ? record.actions.split(', ') : [],
            sourceIps: record.sourceIps ? record.sourceIps.split(', ') : [],
            decision: record.decision
        });
        setIsAclModalVisible(true);
    };

    const handleDeleteAcl = async (subject, resource) => {
        setLoading(true);
        try {
            const result = await remoteApi.deleteAcl(brokerAddress, subject, resource);
            if (result.status === 0) {
                messageApi.success(t.ACL_DELETE_SUCCESS);
                fetchAcls();
            } else {
                messageApi.error(t.ACL_DELETE_FAILED+result.errMsg);
            }
        } catch (error) {
            console.error("Failed to delete ACL:", error);
            messageApi.error(t.ACL_DELETE_EXCEPTION);
        } finally {
            setLoading(false);
        }
    };

    const handleAclModalOk = async () => {
        try {
            const values = await aclForm.validateFields();
            setLoading(true);
            let result;

            const policiesParam = [
                {
                    policyType: values.policyType,
                    entries: [
                        {
                            resource: isUpdate ? [values.resource] : values.resource,
                            actions: values.actions,
                            sourceIps: values.sourceIps,
                            decision: values.decision
                        }
                    ]
                }
            ];

            if (isUpdate) { // This condition seems reversed for update/create based on the current logic.
                result = await remoteApi.updateAcl(brokerAddress, values.subject, policiesParam);
                if (result.status === 0) {
                    messageApi.success(t.ACL_UPDATE_SUCCESS);
                    setIsAclModalVisible(false);
                    fetchAcls(brokerAddress);
                } else {
                    messageApi.error(t.ACL_UPDATE_FAILED+result.errMsg);
                }
                setIsUpdate(false)
            } else {
                result = await remoteApi.createAcl(brokerAddress, values.subject, policiesParam);
                console.log(result)
                if (result.status === 0) {
                    messageApi.success(t.ACL_CREATE_SUCCESS);
                    setIsAclModalVisible(false);
                    fetchAcls(brokerAddress);
                } else {
                    messageApi.error(t.ACL_CREATE_FAILED+result.errMsg);
                }
            }

        } catch (error) {
            console.error("Failed to save ACL:", error);
            messageApi.error(t.SAVE_ACL_FAILED);
        } finally {
            setLoading(false);
        }
    };

// --- Search Functionality ---

    const handleSearch = (value) => {
        if (activeTab === 'users') {
            const filteredData = userListData.filter(item =>
                Object.values(item).some(val =>
                    String(val).toLowerCase().includes(value.toLowerCase())
                )
            );
            if (value === '') {
                fetchUsers();
            } else {
                setUserListData(filteredData);
            }
        } else {
            fetchAcls(value);
        }
    };


    // --- User Table Column Definitions ---
    const userColumns = [
        {
            title: t.USERNAME,
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: t.PASSWORD,
            dataIndex: 'password',
            key: 'password',
            render: (text) => (
                <span>
                {showPassword ? text : '********'}
                    <Button
                        type="link"
                        icon={showPassword ? <EyeInvisibleOutlined /> : <EyeOutlined />}
                        onClick={() => setShowPassword(!showPassword)}
                        style={{ marginLeft: 8 }}
                    >
                    {showPassword ? t.HIDE : t.VIEW}
                </Button>
            </span>
            ),
        },
        {
            title: t.USER_TYPE,
            dataIndex: 'userType',
            key: 'userType',
        },
        {
            title: t.USER_STATUS,
            dataIndex: 'userStatus',
            key: 'userStatus',
            render: (status) => (
                <Tag color={status=== 'enable' ? 'red' : 'green'}>{status}</Tag>
            ),
        },
        {
            title: t.OPERATION,
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button icon={<EditOutlined />} onClick={() => handleEditUser(record)}>{t.MODIFY}</Button>
                    <Popconfirm
                        title={t.CONFIRM_DELETE_USER}
                        onConfirm={() => handleDeleteUser(record.username)}
                        okText={t.YES}
                        cancelText={t.NO}
                    >
                        <Button icon={<DeleteOutlined />} danger>{t.DELETE}</Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

// --- ACL Permission Table Column Definitions ---
    const aclColumns = [
        {
            title: t.USERNAME_SUBJECT,
            dataIndex: 'subject',
            key: 'subject',
        },
        {
            title: t.POLICY_TYPE,
            dataIndex: 'policyType',
            key: 'policyType',
        },
        {
            title: t.RESOURCE_NAME,
            dataIndex: 'resource',
            key: 'resource',
        },
        {
            title: t.OPERATION_TYPE,
            dataIndex: 'actions',
            key: 'actions',
            render: (text) => text ? text.split(', ').map((action, index) => (
                <Tag key={index} color="blue">{action}</Tag>
            )) : null,
        },
        {
            title: t.SOURCE_IP,
            dataIndex: 'sourceIps',
            key: 'sourceIps',
        },
        {
            title: t.DECISION,
            dataIndex: 'decision',
            key: 'decision',
            render: (text) => (
                <Tag color={text === 'Allow' ? 'green' : 'red'}>{text}</Tag>
            ),
        },
        {
            title: t.OPERATION,
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button icon={<EditOutlined />} onClick={() => handleEditAcl(record)}>{t.MODIFY}</Button>
                    <Popconfirm
                        title={t.CONFIRM_DELETE_ACL}
                        onConfirm={() => handleDeleteAcl(record.subject, record.resource)}
                        okText={t.YES}
                        cancelText={t.NO}
                    >
                        <Button icon={<DeleteOutlined />} danger>{t.DELETE}</Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

return (
    <>
        {msgContextHolder}
        <div style={{padding: 24}}>
            <h2>{t.ACL_MANAGEMENT}</h2>

            <div style={{ marginBottom: 16, display: 'flex', gap: 16 }}>
                <Form.Item label={t.PLEASE_SELECT_CLUSTER} style={{ marginBottom: 0 }}>
                    <Select
                        placeholder={t.PLEASE_SELECT_CLUSTER}
                        style={{ width: 200 }}
                        onChange={handleClusterChange}
                        value={selectedCluster}
                        options={clusterNamesOptions}
                    />
                </Form.Item>
                <Form.Item label={t.PLEASE_SELECT_BROKER} style={{ marginBottom: 0 }}>
                    <Select
                        placeholder={t.PLEASE_SELECT_BROKER}
                        style={{ width: 200 }}
                        onChange={handleBrokerChange}
                        value={selectedBroker}
                        options={brokerNamesOptions} // Now dynamically updated
                        disabled={!selectedCluster} // Disable broker selection if no cluster is chosen
                    />
                </Form.Item>
                <Button type="primary" onClick={activeTab === 'users' ? fetchUsers : fetchAcls}>
                    {t.CONFIRM}
                </Button>
            </div>

            <Tabs activeKey={activeTab} onChange={setActiveTab}>
                <TabPane tab={t.ACL_USERS} key="users"/>
                <TabPane tab={t.ACL_PERMISSIONS} key="acls"/>
            </Tabs>

            <div style={{marginBottom: 16, display: 'flex', justifyContent: 'space-between'}}>
                <Button type="primary" onClick={activeTab === 'users' ? handleAddUser : handleAddAcl}>
                    {activeTab === 'users' ? t.ADD_USER : t.ADD_ACL_PERMISSION}
                </Button>
                <Search
                    placeholder={t.SEARCH_PLACEHOLDER}
                    allowClear
                    onSearch={handleSearch}
                    style={{width: 300}}
                />
            </div>

            {activeTab === 'users' && (
                <Table
                    columns={userColumns}
                    dataSource={userListData}
                    loading={loading}
                    pagination={{pageSize: 10}}
                    rowKey="username"
                />
            )}

            {activeTab === 'acls' && (
                <Table
                    columns={aclColumns}
                    dataSource={aclListData}
                    loading={loading}
                    pagination={{pageSize: 10}}
                    rowKey="key"
                />
            )}

            {/* User Management Modal */}
            <Modal
                title={currentUser ? t.EDIT_USER : t.ADD_USER}
                visible={isUserModalVisible}
                onOk={handleUserModalOk}
                onCancel={() => setIsUserModalVisible(false)}
                confirmLoading={loading}
                footer={[
                    <Button key="cancel" onClick={() => setIsUserModalVisible(false)}>
                        {t.CANCEL}
                    </Button>,
                    <Button key="submit" type="primary" onClick={handleUserModalOk} loading={loading}>
                        {t.CONFIRM}
                    </Button>,
                ]}
            >
                <Form
                    form={userForm}
                    layout="vertical"
                    name="user_form"
                    initialValues={{userStatus: 'enable'}}
                >
                    <Form.Item
                        name="username"
                        label={t.USERNAME}
                        rules={[{required: true, message: t.PLEASE_ENTER_USERNAME}]}
                    >
                        <Input disabled={!!currentUser}/>
                    </Form.Item>
                    <Form.Item
                        name="password"
                        label={t.PASSWORD}
                        rules={[{required: !currentUser, message: t.PLEASE_ENTER_PASSWORD}]}
                    >
                        <Input.Password
                            placeholder={t.PASSWORD}
                            iconRender={visible => (visible ? <EyeOutlined/> : <EyeInvisibleOutlined/>)}
                        />
                    </Form.Item>
                    <Form.Item
                        name="userType"
                        label={t.USER_TYPE}
                        rules={[{required: true, message: t.PLEASE_SELECT_USER_TYPE}]}
                    >
                        <Select mode="single" placeholder="Super, Normal" style={{width: '100%'}}>
                            <Select.Option value="Super">Super</Select.Option>
                            <Select.Option value="Normal">Normal</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="userStatus"
                        label={t.USER_STATUS}
                        rules={[{required: true, message: t.PLEASE_SELECT_USER_STATUS}]}
                    >
                        <Select mode="single" placeholder="enable, disable" style={{width: '100%'}}>
                            <Select.Option value="enable">enable</Select.Option>
                            <Select.Option value="disable">disable</Select.Option>
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>

            {/* ACL Permission Management Modal */}
            <Modal
                title={currentAcl ? t.EDIT_ACL_PERMISSION : t.ADD_ACL_PERMISSION}
                visible={isAclModalVisible}
                onOk={handleAclModalOk}
                onCancel={() => setIsAclModalVisible(false)}
                confirmLoading={loading}
            >
                <Form
                    form={aclForm}
                    layout="vertical"
                    name="acl_form"
                >
                    <Form.Item
                        name="subject"
                        label={t.SUBJECT_LABEL}
                        rules={[{required: true, message: t.PLEASE_ENTER_SUBJECT}]}
                    >
                        <SubjectInput disabled={!!currentAcl}/>
                    </Form.Item>

                    <Form.Item
                        name="policyType"
                        label={t.POLICY_TYPE}
                        rules={[{required: true, message: t.PLEASE_ENTER_POLICY_TYPE}]}
                    >
                        <Select mode="single" disabled={isUpdate} placeholder="policyType" style={{width: '100%'}}>
                            <Select.Option value="Custom">Custom</Select.Option>
                            <Select.Option value="Default">Default</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item
                        name="resource"
                        label={t.RESOURCE}
                        rules={[{required: true, message: t.PLEASE_ADD_RESOURCE}]}
                    >
                        {isUpdate ? (
                            <Input disabled={isUpdate}/>
                        ) : (
                            <ResourceInput/>
                        )}
                    </Form.Item>

                    <Form.Item
                        name="actions"
                        label={t.OPERATION_TYPE}
                    >
                        <Select mode="multiple" placeholder="action" style={{width: '100%'}}>
                            <Select.Option value="All">All</Select.Option>
                            <Select.Option value="Pub">Pub</Select.Option>
                            <Select.Option value="Sub">Sub</Select.Option>
                            <Select.Option value="Create">Create</Select.Option>
                            <Select.Option value="Update">Update</Select.Option>
                            <Select.Option value="Delete">Delete</Select.Option>
                            <Select.Option value="Get">Get</Select.Option>
                            <Select.Option value="List">List</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="sourceIps"
                        label={t.SOURCE_IP}
                        rules={[
                            {
                                validator: validateIp,
                            },
                        ]}
                    >
                        <Select
                            mode="tags"
                            style={{width: '100%'}}
                            placeholder={t.ENTER_IP_HINT}
                            onChange={handleIpChange}
                            onDeselect={handleIpDeselect}
                            value={ips}
                            tokenSeparators={[',', ' ']}
                        >
                            <Select.Option value="192.168.1.1">192.168.1.1</Select.Option>
                            <Select.Option value="0.0.0.0">0.0.0.0</Select.Option>
                            <Select.Option value="127.0.0.1">127.0.0.1</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="decision"
                        label={t.DECISION}
                        rules={[{required: true, message: t.PLEASE_ENTER_DECISION}]}
                    >
                        <Select mode="single" placeholder="Allow, Deny" style={{width: '100%'}}>
                            <Select.Option value="Allow">Allow</Select.Option>
                            <Select.Option value="Deny">Deny</Select.Option>
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    </>
);
}

export default Acl;