import React from "react";
import {Form, Input, Modal, Select} from "antd";
import {useStore} from "../../utils/useStore";

export const MembershipModal = ({
                                    visible,
                                    onCreate,
                                    onCancel,
                                    initialData,
                                }) => {
    const [form] = Form.useForm();
    const {Option} = Select;
    const store = useStore();

    return (
        <Modal
            visible={visible}
            title={
                initialData.isChangePassword
                    ? "Change Member Password"
                    : initialData.id
                        ? "Edit Member"
                        : "Create a new Membership"
            }
            okText={initialData.id ? "Edit" : "Create"}
            cancelText="Cancel"
            onCancel={() => {
                form.resetFields();
                onCancel();
            }}
            onOk={() => {
                form
                    .validateFields()
                    .then((values) => {
                        let input = values;
                        if (initialData.id)
                            input.username = initialData.username;

                        onCreate(input);
                        form.resetFields();
                    })
                    .catch((info) => {
                        console.log("Validate Failed:", info);
                    });
            }}
        >
            <Form
                form={form}
                layout="vertical"
                name="form_in_modal"
                initialValues={initialData}
            >
                {((initialData.id && !initialData.isChangePassword) ||
                    !initialData.id) && (
                    <Form.Item
                        name="name"
                        label="Name"
                        rules={[{required: true, message: "Please input Name!"}]}
                    >
                        <Input/>
                    </Form.Item>
                )}
                {!initialData.id && (
                    <Form.Item
                        name="username"
                        label="Username"
                        rules={[{required: true, message: "Please input Username!"}]}
                    >
                        <Input/>
                    </Form.Item>
                )}
                {((initialData.id && initialData.isChangePassword) ||
                    !initialData.id) && (
                    <Form.Item
                        name="password"
                        label="Password"
                        rules={[{required: false, message: "Please input password!"}]}
                    >
                        <Input.Password/>
                    </Form.Item>
                )}
                {((initialData.id && !initialData.isChangePassword) ||
                    !initialData.id) && (
                    <Form.Item
                        name="phone_number"
                        label="Phone Number"
                        rules={[{required: true, message: "Please input Phone Number!"}]}
                    >
                        <Input/>
                    </Form.Item>
                )}
                {((initialData.id && !initialData.isChangePassword) ||
                    !initialData.id) && (
                    <Form.Item
                        name="roleId"
                        label="Role"
                        rules={[{required: true, message: "Please input role id!"}]}
                    >
                        <Select>
                            {store.role.data.map((item) => (
                                <Option key={item.id} value={item.id}>
                                    {item.name}
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>
                )}
            </Form>
        </Modal>
    );
};