import {WidgetType, Vertical} from '@ui/index';
import Model from '../../link-set.model';
import Title from '../right_title/right.title.component';
import RightShow from '../right_show/right.show.component';
import RightEdit from '../right_edit/right.edit.component';
import RightEditMysql from '../right_edit/right.edit.mysql.component';
import {LinkType} from '@ui/type';
const className = 'fr.component.right.detail';
let rightDetail: any = null;
const Widget: WidgetType = {
  _store() {
    return BI.Models.getModel(Model);
  },
  watch:{
    linkSelected(linkSelected: LinkType) {
      const typeEdit = linkSelected.databaseType === 'mysql' ? RightEditMysql : RightEdit;
      rightDetail.populate(BI.createItems([
        {
          type: Title,
          isEdit: linkSelected.isSelected,
          linkSelected,
        }, {
          type: linkSelected.isSelected ? typeEdit : RightShow,
          linkSelected,
        },
      ]));
    },
  },
  render() {
    return {
      type: Vertical,
      cls:'right-content',
      ref(_ref: any) {
        rightDetail = _ref;
      },
    };
  },
  mounted() {
    const linkSelected: LinkType = this.model.linkSelected;
    const typeEdit = linkSelected.databaseType === 'mysql' ? RightEditMysql : RightEdit;
    rightDetail.populate(BI.createItems([
      {
        type: Title,
        isEdit: linkSelected.isSelected,
        linkSelected,
      }, {
        type: linkSelected.isSelected ? typeEdit : RightShow,
        linkSelected,
      },
    ]));
  },
};
BI.shortcut(className, BI.inherit(BI.Widget, Widget));
export default className;