import { shortcut, store } from '@core/core';
import { TitleModel, TitleModelXtype } from './title.model';
import { PAGE_INDEX } from '@constants/constant';
import { TitleDatabase } from './title_database/title_datebase';
import { TitleMaintain } from './title_maintain/title_maintain';
import { LinearSegment, Tab } from '@fui/core';
export const TitleXtype = 'dec.dcm.title';

@shortcut(TitleXtype)
@store(TitleModelXtype)
export class Title extends BI.Widget {
    props = {
        baseCls: 'bi-card',
    }
    tab: Tab;
    linearSegment: LinearSegment;

    model: TitleModel['model'];
    store: TitleModel['store'];

    watch = {
        pageIndex: (index: string) => {
            this.tab.setSelect(index);
            this.linearSegment.setVisible(index === PAGE_INDEX.CONNECTION || index === PAGE_INDEX.POOL);
        },
    }

    render() {
        return {
            type: BI.LeftRightVerticalAdaptLayout.xtype,
            items: {
                left: [
                    {
                        type: BI.LinearSegment.xtype,
                        cls: 'bi-font-bold',
                        height: 40,
                        hgap: 10,
                        layouts: [{
                            type: BI.VerticalAdaptLayout.xtype,
                        }],
                        ref: (_ref: LinearSegment) => {
                            this.linearSegment = _ref;
                        },
                        items: [
                            {
                                text: BI.i18nText('Dec-Dcm_Connection_Management'),
                                $testId: 'dec-dcm-connection-tab',
                                selected: true,
                                value: PAGE_INDEX.CONNECTION,
                                hgap: 15,
                            },
                            {
                                text: BI.i18nText('Dec-Dcm_Pool_Connection_Management'),
                                $testId: 'dec-dcm-connection-tab',
                                value: PAGE_INDEX.POOL,
                                hgap: 15,
                            },
                        ],
                        listeners: [{
                            eventName: BI.ButtonGroup.EVENT_CHANGE,
                            action: () => {
                                this.store.setPageIndex(this.linearSegment.getValue()[0]);
                            },
                        }],
                    },
                ],
                right: [
                    {
                        type: BI.Tab.xtype,
                        height: 40,
                        showIndex: this.model.pageIndex,
                        ref: (_ref: Tab) => {
                            this.tab = _ref;
                        },
                        cardCreator: (index: string) => {
                            switch (index) {
                                case PAGE_INDEX.DATEBASE:
                                    return {
                                        type: TitleDatabase,
                                    };
                                case PAGE_INDEX.MAINTAIN:
                                    return {
                                        type: TitleMaintain,
                                    };
                                default:
                                    return {
                                    };
                            }
                        },
                    },
                ],
            },
        };
    }
}