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

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

import { Table, Card, Button } from 'soxo-firebase-core';

import { FormCreator } from 'soxo-firebase-core';

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

import './generic-add-modal.scss';

const { Title } = Typography;


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

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

    useEffect(() => {

        if (model.id) {

            loadModelColumns();

        } else {

            setConfig({
                fields: model.fields
            })
        }

    }, []);

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

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

            console.log(result);

            let model = {
                fields: result
            }

            setConfig(model)

        })
    }


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

        if (formContent.id) {

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

                    callback();
                })
                .catch(() => {
                    message.error('Operation Failed');
                });

        } else {

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

                    callback();

                })
                .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} formContent={formContent} model={config} onSubmit={onSubmit} />
            </Card>
        </div>
    );
};

export default GenericAdd;
