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

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

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

import { Table, Card, Button, JSONInput, Switch } from './../../../../lib';


import { ModelsAPI, PagesAPI,RolesAPI } from '../../..';

// import './generic-add.scss';
const { TextArea } = Input;

const { Title } = Typography;

const { Option } = Select;



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

    let mode = 'Add';

    if (formContent.id) {
        mode = 'Edit'
    } else if (formContent.copy) {
        mode = 'copy'
    }

    if (formContent.attributes) {

        if (typeof formContent.attributes === 'string') {

            if (formContent.attributes !== '') {

                formContent.attributes = JSON.parse(formContent.attributes);

            } else {

                formContent.attributes = {};

            }
        }
    } else {
        formContent.attributes = {}
    }


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

    const [form] = Form.useForm();

    const [pages, setPages] = useState([]);

    const [models, setModels] = useState([]);

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

    const { params } = match;

    let location = useLocation();

    const query = new URLSearchParams(location.search);

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

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

    console.log(step);

    console.log(model);

    useEffect(() => {

        // loadModelColumns();
        getPages();

        getModels();

        setLoading(false);

    }, []);


    /**
     * Load the Staffs
     */
    const getPages = () => {
        PagesAPI.getPages().then((result) => {
            setPages(result.result);
        });
    };

    /**
     * Load the Models
     */
    const getModels = () => {
        ModelsAPI.get().then((result) => {
            console.log(result);

            setModels(result.result);
        });
    };


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

        let id = formContent.id;

        if (values.attributes && typeof values === 'object') {

            values = {
                ...values,
                attributes: JSON.stringify(values.attributes)
            }
        }

        if (id) {
            // Update of model
            RolesAPI.updateRole({ id, formBody: values }).then(() => {

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

                setLoading(false);

                callback();

            });

        } else {

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

                values[field] = value;

            })

            // add new model
            RolesAPI.createRole(values).then(() => {

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

                setLoading(false);

                callback();

            });
        }
    };

    return (
        <section className="collection-add">
            <Title level={4}>{mode} Role</Title>

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

                    {/* Caption */}
                    <Form.Item name={"name"} label="Name" required>
                        <Input placeholder="Enter name" />
                    </Form.Item>
                    {/* Caption Ends */}

                    {/* Name */}
                    <Form.Item name={"identifier"} label="Identifier" required>
                        <Input placeholder="Enter identifier" />
                    </Form.Item>
                    {/* Name Ends */}

                    {/* Path */}
                    <Form.Item name="weight" label="Weight" required>
                        <Input placeholder="Enter weight" />
                    </Form.Item>
                    {/* Path Ends */}

                    {/* Path */}
                    <Form.Item name="description" label="Description" required>
                        <Input placeholder="Enter description" />
                    </Form.Item>
                    {/* Path Ends */}

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

export default RoleAdd;
