import React, { useState, Suspense, useEffect, lazy, Component } from 'react';

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

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

export default class MenuTemplateAPI extends Component {

    constructor(props) {

        super(props);

        this.state = {
            loading: false,
            model: null,
            view: [],
            component: null,
        };

        this.loadedComponent = () => null;
        this.loadedModel = () => null;
        this.menuDetail = () => { };
    }

    /**
     * 
     */
    componentDidMount() {

        var genericComponents = require('./../../modules/');

        var genericModels = require('./../../models/')

        const { menu, callback, CustomComponents, CustomModels } = this.props;

        var allComponents = {
            ...genericComponents,
            ...CustomComponents,
        }

        var allModels = {
            ...genericModels,
            ...CustomModels
        }

        let BaseModel = {};


        if (menu.model) {

            BaseModel = new BaseLoaderAPI(menu.model);

        }

        // ./../../../core/modules/generic/generic-list/generic-list
        // Load the component with path
        // this.loadedComponent = LoadAsyncComponent(() => require(`./../../../core/modules/generic/generic-list/generic-list`));

        // this.loadedComponent = LoadAsyncComponent(() => require(`./../../../${menu.page.path}`));
        if (menu && (menu.page.identifier) || (menu.page.path)) {

            let identifier = menu.page.identifier || menu.page.path;

            if (identifier && allComponents[identifier]) {

                this.loadedComponent = allComponents[identifier]

            }


            // this.loadedComponent = LoadAsyncComponent(() => require(`./../../${menu.page.path}`));

            // this.loadedComponent = LoadAsyncComponent(() => require(`./../../${menu.page.path}`));

        }


        if (menu && menu.model_id) {

            if (menu.model_id && allModels[menu.model.name]) {

                this.loadedModel = allModels[menu.model.name]

            } else {

                // BaseModel = this.loadedModel[menu.model.name];

                this.loadedModel = BaseModel

                // if (this.allModels[menu.model.name]) {

                //     BaseModel = this.loadedModel[menu.model.name];
                // }


            }


            // this.loadedComponent = LoadAsyncComponent(() => require(`./../../${menu.page.path}`));

            // this.loadedComponent = LoadAsyncComponent(() => require(`./../../${menu.page.path}`));

        }


        // this.loadedModel = require('./../../../models/');

        // If there is model 
        // if (menu.model.name) {

        //     if (this.loadedModel[menu.model.name]) {

        //         BaseModel = this.loadedModel[menu.model.name];
        //     }

        // } else {

        // }

        callback({ menu, model: this.loadedModel });

        this.setState({ loading: true, component: this.loadedComponent, model: this.loadedModel });

    }

    render() {
        const { props } = this;

        const { menu } = this.props;

        const { loading, model, menuDetail } = this.state;

        const ComponentLoaderForParticulatMenu = this.loadedComponent;

        // Parse the attrbutes for the menu to customize the menu
        let attributes = {};

        if (menu.attributes) {
            if (typeof menu.attributes === 'string') {

                attributes = JSON.parse(menu.attributes);
            }
        }

        return (
            <div className="menu-template">
                {loading && ComponentLoaderForParticulatMenu && model ? (
                    <GlobalMenuProvider menu={menu}>
                        <ComponentLoaderForParticulatMenu
                            {...props}

                            {...menu}

                            {...attributes}

                            menu={menu}
                            model={model}
                            {...props}
                            menuDetail={menuDetail}
                        />
                    </GlobalMenuProvider>

                ) : null}
            </div>
        );
    }
}

