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

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


    return (
        <Modal
            visible={visible}
            title={initialData.id ? "Edit Member" : "Create a new Membership"}
            okText={initialData.id ? "Edit" : "Create"}
            cancelText="Cancel"
            onCancel={() => {
                form.resetFields()
                onCancel()
            }}
            onOk={() => {
                form
                    .validateFields()
                    .then(values => {
                        onCreate(values);
                        form.resetFields()
                    })
                    .catch(info => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                form={form}
                layout="vertical"
                name="form_in_modal"
                initialValues={initialData}
            >
                
                <Form.Item
                    name="username"
                    label="Username"
                    rules={[{required: true, message: 'Please input Username!'}]}
                >
                    <Input/>
                </Form.Item>
                <Form.Item
                    name="password"
                    label="Password"
                    rules={[{required: true, message: 'Please input password!'}]}
                >
                    <Input/>
                </Form.Item>
                <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.Item
                    name="superior"
                    label="Superior"
                    rules={[{required: true, message: 'Please select superior status!'}]}
                >
                    <Select
                        showSearch
                        placeholder="Select Status"
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        filterSort={(optionA, optionB) =>
                            optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
                        }
                    >
                        {dataStatus.map(it => {
                            return <Option value={it}>{capitalize(it)}</Option>
                        })}
                    </Select>
                </Form.Item>
            </Form>
        </Modal>
    );
};