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

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

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

import './page-add.scss';

const { Title } = Typography;

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


    if (formContent.language_string) {

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

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

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

            } else {

                formContent.language_string = {};

            }
        }
    } 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;

    useEffect(() => {

        // loadModelColumns();

        // getPages();

        // getModels();

        setLoading(false);

    }, []);



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

        setLoading(true);

        let id = formContent.id;

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

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

        if (id && !config.copy) {

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

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

                setLoading(false);

                callback();

            });

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

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

                setLoading(false);

                callback();

            });
        }
    };

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

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

                    <div className='form-container'>
                        <div className='left-container'>
                            {/* Name */}
                            <Form.Item name={"name"} label="Name" required>
                                <Input placeholder="Enter name" />
                            </Form.Item>
                            {/* Name Ends */}

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

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

                            {/* Remote Entry Path */}
                            <Form.Item name="remote_entry_path" label="Remote Entry Path">
                                <Input placeholder="Enter Remote Entry Path" />
                            </Form.Item>
                            {/* Remote Entry Path Ends */}

                            <Form.Item>
                                <Button loading={loading} htmlType={'submit'} type="primary">
                                    Submit
                                </Button>
                            </Form.Item>
                        </div>
                        <div className='right-container'>
                            {/* Language String */}
                            <Form.Item name={"language_string"} label="Language String">

                                <JSONInput />

                            </Form.Item>
                            {/* Language String Ends */}
                        </div>
                    </div>

                </Form>
            )}
        </section>
    );
};

export default PageAdd;
