import { shortcut, store } from '@core/core';
import { ButtonGroup, Htape, Vtape, Label, Vertical, Layout } from 'ui';
import { ConnectionPoolModel, ConnectionPoolModelXtype } from './connection_pool.model';
import { ListItemXtype } from './list_item/list_item';
import { PoolXtype } from './pool/pool';
export const ConnectionPoolXtype = 'dec.dcm.connection_pool';
@shortcut(ConnectionPoolXtype)
@store(ConnectionPoolModelXtype)
export class ConnectionPool extends BI.Widget {
    groupWidget: any;
    title: any;

    model: ConnectionPoolModel['model'];
    store: ConnectionPoolModel['store'];

    watch = {
        selected: (selected: string) => {
            this.title.setText(selected);
        },
    }

    mounted() {
        const defaultSelected = this.model.connectionJDBC.length > 0 ? this.model.connectionJDBC[0].connectionName : '';
        this.store.setSelected(defaultSelected);
    }

    render() {
        return {
            type: Htape,
            items: [
                {
                    el: {
                        type: Vtape,
                        cls: 'bi-border-right',
                        items: [
                            {
                                el: {
                                    type: Label,
                                    cls: 'bi-border-bottom',
                                    textAlign: 'left',
                                    text: BI.i18nText('Dec-Dcm_Data_Connections'),
                                    lgap: 10,
                                },
                                height: 40,
                            },
                            {
                                type: ButtonGroup,
                                layouts: [{
                                    type: Vertical,
                                }],
                                items: this.renderList(),
                                ref: (_ref: any) => {
                                    this.groupWidget = _ref;
                                },
                            },
                        ],
                    },
                    width: 275,
                },
                {
                    type: Vtape,
                    items: [
                        {
                            el: {
                                type: Label,
                                cls: 'bi-border-bottom',
                                textAlign: 'left',
                                lgap: 10,
                                ref: (_ref: any) => {
                                    this.title = _ref;
                                },
                            },
                            height: 40,
                        },
                        this.model.connectionJDBC.length > 0 ?
                            {
                                type: PoolXtype,
                            } :
                            {
                                type: Layout,
                            },
                    ],
                },
            ],
        };
    }

    private renderList() {
        const defaultSelected = this.model.connectionJDBC.length > 0 ? this.model.connectionJDBC[0].connectionName : '';
        
        return this.model.connectionJDBC.map(item => {
            return {
                type: ListItemXtype,
                name: item.connectionName,
                value: item.connectionName,
                selected: item.connectionName === defaultSelected,
            };
        });
    }
}