import React, { useState, useEffect } from 'react';

import { useLocation } from 'react-router-dom';

import { Skeleton, Typography, message, Form, Select } from 'antd';

import { Button } from './../../../../lib';

import { RolesAPI } from '../../..';

const { Title } = Typography;

const { Option } = Select;



const MenuRolesAdd = ({ model, callback, edit, history, formContent, match, additional_queries = [], ...props }) => {

    const [roles, setRoles] = useState([]);

    const [loading, setLoading] = useState(true);

    const [form] = Form.useForm();

    const [body, setBody] = useState(formContent);

    let location = useLocation();

    const query = new URLSearchParams(location.search);

    console.log(query.get('step'));

    let step = parseInt(query.get('step')) || 0;

    console.log(step);

    useEffect(() => {

        // loadModelColumns();
        getRoles();

        setLoading(false);

    }, []);


    /**
     * Load the Staffs
     */
    const getRoles = () => {

        RolesAPI.get({ url: 'core-roles' }).then((result) => {
            // console.log(result);

            setRoles(result.result);

        });
    };

    /**
     * Submit values
     */
    const onSubmit = (values) => {
        // console.log(values);
        setLoading(true);

        let id = formContent.id;

        // Add the step to form content
        values.step = step;

        if (id) {
            // Update of model
            model.update({ id, values }).then(() => {

                // callback();
                message.success('Menu Updated');

                setLoading(false);

                callback();

            });

        } else {

            values.step = 1;

            // Append the additional queries to the object
            additional_queries.forEach(({ field, value }) => {

                values[field] = value;

            })

            // add new model
            model.addMenuRole({ values }).then(() => {

                // callback();
                message.success('Menu Added');

                setLoading(false);

                callback();

            });
        }
    };

    return (
        <section className="collection-add">
            <Title level={4}>{edit ? 'Edit' : 'Add'} Menu Role</Title>

            {loading ? (
                <Skeleton />
            ) : (
                <Form initialValues={{ ...body }} form={form} layout="vertical" onFinish={onSubmit}>

                    {/* Model */}
                    <Form.Item label="Roles" name={'role_id'} required>

                        {/* <ReferenceSelect value={model.id} label={model.name} model={Models} /> */}
                        <Select style={{ width: '100%' }}>
                            {roles.map((model, key) => (
                                <Option key={key} value={model.id}>{model.name} {model.id}</Option>
                            ))}
                        </Select>

                    </Form.Item>
                    {/* Model Ends */}

                    <Form.Item>
                        <Button loading={loading} htmlType={'submit'} type="primary">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            )}
        </section>
    );
};

export default MenuRolesAdd;
