import { shortcut, store } from '@core/core';
import { Title } from './title/title';
import { PAGE_INDEX } from './constants/constant';
import { Connection } from './pages/connection/connection';
import { AppModel } from './app.model';
import { Tab } from '@fui/core';
import { Datebase } from './pages/database/database';
import { Maintain } from './pages/maintain/maintain';
import { ConnectionPool } from './pages/connection_pool/connection_pool';
import './app.provider';
import '../less/index.less';

@shortcut()
@store(AppModel)
export class App extends BI.Widget {
    static xtype = 'dec.dcm.main';

    tab: Tab;

    store: AppModel['store'];
    model: AppModel['model'];

    watch = {
        pageIndex: (index: string) => {
            this.tab.setSelect(index);
        },
    }

    render() {
        return {
            type: BI.VTapeLayout.xtype,
            items: [
                {
                    el: {
                        type: Title.xtype,
                        cls: 'bi-border-bottom',
                    },
                    height: 40,
                },
                {
                    type: BI.AbsoluteLayout.xtype,
                    cls: 'bi-background',
                    items: [{
                        el: {
                            type: BI.Tab.xtype,
                            cls: 'bi-card',
                            single: true,
                            tgap: 10,
                            showIndex: this.model.pageIndex,
                            ref: (_ref: Tab) => {
                                this.tab = _ref;
                            },
                            cardCreator: (index: string) => {
                                switch (index) {
                                    case PAGE_INDEX.CONNECTION:
                                        return {
                                            type: Connection.xtype,
                                        };
                                    case PAGE_INDEX.DATEBASE:
                                        return {
                                            type: Datebase.xtype,
                                        };
                                    case PAGE_INDEX.MAINTAIN:
                                        return {
                                            type: Maintain.xtype,
                                        };
                                    default:
                                        return {
                                            type: ConnectionPool.xtype,
                                        };
                                }
                            },
                        },
                        left: 10,
                        top: 10,
                        right: 10,
                        bottom: 10,
                    }],
                },
            ],
        };
    }
}