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

import { Typography, Space, message, Card, Button } from 'antd';

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

import { ModelColumnsAPI } from '../../../../models';

import './generic-add.scss';

const { Title } = Typography;

const GenericAdd = ({ model, callback, formContent }) => {

    const [config, setConfig] = useState({ fields: [] })

    useEffect(() => {

        if (model.id) {

            loadModelColumns();

        } else {

            // let model = {
            //     fields: result.result
            // }

            setConfig(model)
        }

    }, []);

    /**
     * Load all the model columns
     */
    function loadModelColumns() {

        ModelColumnsAPI.getFormColumns(model.id).then((result) => {

            console.log(result);

            let model = {
                fields: result.result
            }

            setConfig(model)

            console.log(model + "hello")

        })
    }

    /**
     *
     */
    function onSubmit(values) {

        if (formContent && formContent.id) {

            // save the data to the model
            return model
                .update({ id, values, user })
                .then(() => {
                    message.success('Operation Successful');
                })
                .catch(() => {
                    message.error('Operation Failed');
                });

        } else {

            // save the data to the model
            return model
                .add({ values })
                .then(() => {
                    message.success('Operation Successful');
                })
                .catch(() => {
                    message.error('Operation Failed');
                });
        }

    }

    return (
        <div className="generic-add">
            {/* Table Header */}
            <div className="table-header">
                <div className="table-title">
                    <Title level={4}>{model.name}</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">
                                {/* <Button type="secondary" size={'small'}>
                                    Cancel
                                </Button> */}
                            </Space>
                        </div>
                    </div>
                </div>
            </div>
            {/* Table Header Ends */}

            <Card className="detail-content">
                <FormCreator fields={config.fields} model={config} onSubmit={onSubmit} />
            </Card>
        </div>
    );
};

export default GenericAdd;
