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

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

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

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

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

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

import './generic-edit.scss';

import { ReloadOutlined, OrderedListOutlined, PicCenterOutlined, DeleteOutlined } from '@ant-design/icons';

const { Title } = Typography;


const GenericEdit = ({ history, model, match }) => {

    let { id } = useParams();

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

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

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

    useEffect(() => {

        loadModelColumns().then(() => {

            getRecords();

        })

    }, []);

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

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

            console.log(result);

            let model = {
                fields: result
            }

            setConfig(model)

        })
    }

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

            setRecord(result);

            setLoading(false);
        });
    }

    /**
     *
     */
    function onSubmit(formBody) {
        return model
            .update({ id, formBody })
            .then(() => {
                message.success('Operation Successful');
            })
            .catch(() => {
                message.error('Operation Failed');
            });
    }

    return (
        <div className="generic-detail">
            {/* 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 onClick={getRecords} type="secondary" size={'small'}>
                                    <ReloadOutlined />
                                </Button> */}
                            </Space>
                        </div>
                    </div>
                </div>
            </div>
            {/* Table Header Ends */}

            {loading ? (
                <Skeleton />
            ) : (
                <Card className="detail-content">
                    <FormCreator formContent={record} model={config} onSubmit={onSubmit} />
                </Card>
            )}
        </div>
    );
};

export default GenericEdit;
