import {WidgetType, Htape, Vtape, Left, Label, VerticalAdapt} from '@ui';
import linkStatusModel from './link_status.model';
import LeftList from './left/left';
import Right from './right/right';
import {TAB_LINK_POOL} from '@private/constants';
const className = 'dec.dcm.linkstatus';

const Widget: WidgetType = {
  _store() {
    return BI.Models.getModel(linkStatusModel);
  },
  watch: {
    tab(tab: string) {
      this.setVisible(tab === TAB_LINK_POOL);
    },
  },
  render() {
    return {
      type: Htape,
      cls: 'bi-card',
      items: [{
        el: {
          type: Vtape,
          cls: 'dcm-link-left bi-border-right',
          items: [
            {
              el: {
                type: VerticalAdapt,
                cls: 'bi-border-bottom',
                items: [
                  {
                    type: Label,
                    cls: 'bi-font-bold',
                    hgap: 6,
                    vgap: 6,
                    text: BI.i18nText('Dec-Dcm_Data_Connections'),
                  },
                ],
              },
              height: 40,
            }, {
              type: LeftList,
              cls: 'left-list',
            },
          ],
        },
        width: 280,
      }, {
        type: Right,
      }],
    };
  },
};

BI.shortcut(className, BI.inherit(BI.Widget, Widget));
export default className;