/**
 * Lookup Values Add
 */

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

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

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

import {FormCreator} from './../../../../lib'

const { Title } = Typography;


const LookValuesModal = ({ model, callback }) => {

    let { id } = useParams();

    // Queries for filtering module menus
    let menuConfig = { includes: null, queries: [{ field: 'module_id', value: id }] };

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

    const [record, setRecord] = useState < Record > ({});

    useEffect(() => {
        getRecords();
    }, []);

    function getRecords() {
        setLoading(true);
        // Get the records
        model.getRecord({ id }).then((result) => {
            console.log(result);

            setRecord(result);

            setLoading(false);
        });
    }

    /**
     * On creation of new module menu
     */
    function onSubmit(values) {

        values = {
            ...values,
            lookup_type_id: id
        }

        return model.add({ values }).then(() => {

            message.success('Operation Success');

        })
    }

    return (
        <div className="generic-detail">
            {/* Table Header */}
            <div className="table-header">
                <div className="table-title">
                    <Title level={4}>Add Menu</Title>

                    {/* <p>{loading ? 'Loading records' : `${records[model.name].length} records`}</p> */}
                </div>

                <div className="table-bar">
                    {/* Table Filters */}
                    <div className="table-filters"></div>
                    {/* Table Filters Ends */}

                    <div className="table-actions">
                        <div className="button-container">
                            <Space size="small">

                            </Space>
                        </div>
                    </div>
                </div>
            </div>
            {/* Table Header Ends */}

            {loading ? <Skeleton /> : <>

                <FormCreator model={model} fields={model.fields} onSubmit={onSubmit} />

            </>}
        </div>
    );
};

export default LookValuesModal;
