import { Vtape, Label, VerticalAdapt, ListView, IconButton } from 'ui';
import { shortcut, store } from '@core/core';
import { MaintainModel, MaintainModelXtype } from './maintain.model';
import { MaintainFormXtype } from './forms/form';
import { PAGE_INDEX } from '@constants/constant';
import { ApiFactory } from 'src/modules/crud/apiFactory';
const api = new ApiFactory().create();
import './maintain.less';

export const MaintainXtype = 'dec.dcm.maintain';
@shortcut(MaintainXtype)
@store(MaintainModelXtype)
export class Maintain extends BI.Widget {
    model: MaintainModel['model'];
    store: MaintainModel['store'];

    listView: any;

    render() {
        const { text, isEdit } = this.getEditConnection();
        
        return {
            type: Vtape,
            hgap: 10,
            vgap: 10,
            items: [
                {
                    type: VerticalAdapt,
                    cls: 'bi-border-bottom',
                    items: [
                        {
                            type: IconButton,
                            hgap: 5,
                            cls: 'dcm-back-font',
                            invisible: isEdit,
                            handler: () => {
                                this.store.setPageIndex(PAGE_INDEX.DATEBASE);
                            },
                        },
                        {
                            type: Label,
                            text: this.model.isCopy ? `${text}-${BI.i18nText('Dec-Dcm_Copy')}` : text,
                        },
                    ],
                    height: 40,
                },
                {
                    type: ListView,
                    ref: (_ref: any) => {
                        this.listView = _ref;
                    },
                    items: this.renderItems(),
                },
            ],
        };
    }

    mounted() {
        if (!api.getSocketStatus()) {
            BI.Msg.toast(BI.i18nText('Dec-Dcm_Socket_Unable_Connect'), {
                level: 'warning',
            });
        }
    }

    private renderItems() {
        const { type } = this.getEditConnection();
        
        return [{
            type: MaintainFormXtype,
            connectionType: type,
        }];
    }

    private getEditConnection() {
        if (this.model.datebaseTypeSelected) {
            return {
                type: this.model.datebaseTypeSelectedOne.type,
                text: this.model.datebaseTypeSelectedOne.text,
                isEdit: false,
            };
        }
        
        return {
            type: this.model.connectionSelectedOne.connectionType,
            text: this.model.connectionSelectedOne.connectionName,
            isEdit: true,
        };
    }
}