import {WidgetType, Vertical, MultiSelectItem, TextAreaEditor, Editor, Button, TextValueCombo} from '@ui/index';
import {LinkType} from '@ui/type';
import charset from './right.edit.constant';
import Model from '../../link-set.model';
import FormItem from '@shared/components/form.item.component';
import Title from '@shared/components/title.component';
import {getDrivers} from './right.edit.service';
let ConnectionName: any = null;
const className = 'fr.component.right.edit';
const Widget: WidgetType = {
  _store() {
    return BI.Models.getModel(Model);
  },
  watch:{
    connectionNameErr(msg: string) {
      if (msg) {
        BI.Bubbles.show('singleBubble', msg, ConnectionName, {
          level: 'error',
        });
      } else {
        BI.Bubbles.hide('singleBubble');
      }
    },
  },
  render() {
    const linkSelected: LinkType = this.model.linkSelected;
    const that = this;
    
    return {
      type: Vertical,
      cls: 'right-show',
      items: [
        {
          type: FormItem,
          text: BI.i18nText('BI-Connection-Form-ConnectionName'),
          hint: BI.i18nText('BI-Connection-Form-ConnectionName-Change-Confirm'),
          form:{
            type: Editor,
            cls: 'bi-border',
            width: 300,
            value: linkSelected.connectionName,
            ref(ref: any) {
              ConnectionName = ref;
            },
            listeners: [{
              eventName: BI.Editor.EVENT_CHANGE,
              action() {
                that.store.setLinkUpdate({
                  ...that.model.linkUpdate,
                  connectionName: this.getValue(),
                });
              },
            }, {
              eventName: BI.Editor.EVENT_FOCUS,
              action() {
                that.store.setConnectionNameErr('');
              },
            }],
          },
        },
        {
          type: FormItem,
          text: BI.i18nText('BI-First_Step'),
          height: 400,
          form:{
            type: Vertical,
            cls: 'right-form',
            items:[
              {
                type: FormItem,
                text: BI.i18nText('BI-Connection-Form-Driver'),
                form:{
                  type: TextValueCombo,
                  cls: 'bi-border',
                  width: 300,
                  text: linkSelected.driver,
                  items: getDrivers(linkSelected),
                  listeners: [{
                    eventName: BI.TextValueCombo.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        driver: this.getValue()[0],
                      });
                    },
                  }],
                },
              },
              {
                type: FormItem,
                text: BI.i18nText('BI-Connection-Form-URL'),
                form:{
                  type: Editor,
                  cls: 'bi-border',
                  watermark:BI.i18nText('BI-Connection-Form-Place-Input'),
                  width: 300,
                  value: linkSelected.url,
                  listeners: [{
                    eventName: BI.Editor.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        url: this.getValue(),
                      });
                    },
                  }],
                },
              },
              {
                type: FormItem,
                text: BI.i18nText('BI-Connection-Form-OriginalCharsetName'),
                form:{
                  type: TextValueCombo,
                  cls: 'bi-border',
                  width: 300,
                  text: linkSelected.originalCharsetName === '' ? BI.i18nText('BI-Connection-Form-Auto') : linkSelected.originalCharsetName,
                  items: BI.Constants.getConstant(charset),
                  listeners: [{
                    eventName: BI.TextValueCombo.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        originalCharsetName: this.getValue()[0],
                      });
                    },
                  }],
                },
              },
              {
                type: FormItem,
                text: BI.i18nText('BI-Connection-Form-UserName'),
                form:{
                  type: Editor,
                  cls: 'bi-border',
                  allowBlank:true,
                  watermark:BI.i18nText('BI-Connection-Form-Place-Input'),
                  width: 300,
                  value: linkSelected.user,
                  listeners: [{
                    eventName: BI.Editor.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        user: this.getValue(),
                      });
                    },
                  }],
                },
              },
              {
                type: FormItem,
                text: BI.i18nText('BI-Connection-Form-Password'),
                form:{
                  type: Editor,
                  cls: 'bi-border',
                  inputType:'password',
                  allowBlank:true,
                  watermark:BI.i18nText('BI-Connection-Form-Place-Input'),
                  width: 300,
                  value: linkSelected.password,
                  listeners: [{
                    eventName: BI.Editor.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        password: this.getValue(),
                      });
                    },
                  }],
                },
              },
              {
                type: Title,
                text: BI.i18nText('BI-Connection-Form-Pool-Properties'),
              },
              {
                type: FormItem,
                text: BI.i18nText('BI-Connection-Form-SQL-Validation-Query'),
                height: 100,
                form:{
                  type: TextAreaEditor,
                  cls: 'bi-border',
                  allowBlank:true,
                  watermark:BI.i18nText('BI-Connection-Form-Place-Input'),
                  width: 300,
                  height:100,
                  value: linkSelected.validationQuery,
                  listeners: [{
                    eventName: BI.Editor.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        validationQuery: this.getValue(),
                      });
                    },
                  }],
                },
              },
              {
                type: FormItem,
                text: BI.i18nText('BI-Connection-Form-Connection-Check'),
                form:{
                  type: MultiSelectItem,
                  text: BI.i18nText('BI-Yes'),
                  selected: linkSelected.testOnBorrow,
                  width: 60,
                  listeners: [{
                    eventName: BI.Editor.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        testOnBorrow: this.isSelected(),
                      });
                    },
                  }],
                },
              },
              {
                type: FormItem,
                text: BI.i18nText('BI-Connection-Form-Connection-Max-Number'),
                form:{
                  type: Editor,
                  cls: 'bi-border',
                  allowBlank:true,
                  watermark:BI.i18nText('BI-Connection-Form-Place-Input'),
                  width: 60,
                  value: linkSelected.maxActive,
                  errorText: BI.i18nText('BI-Connection-Form-Place-Input-Number'),
                  validationChecker (v: string) {
                    if (/^\+?[1-9][0-9]*$/.test(v)) {
                      return true;
                    }
                    
                    return false;
                  },
                  listeners: [{
                    eventName: BI.Editor.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        maxActive: this.getValue(),
                      });
                    },
                  }],
                },
              },
            ],
          },
        },
        {
          type: FormItem,
          text: BI.i18nText('BI-Second_Step'),
          form: {
            type: Button,
            text: BI.i18nText('BI-Test-Connection'),
            level: 'ignore',
          },
        },
        {
          type: FormItem,
          text: BI.i18nText('BI-Third_Step'),
          form: {
            type: FormItem,
            text: BI.i18nText('BI-Connection-Form-Pattern'),
            form: {
              type: Editor,
              cls: 'bi-border',
              width: 300,
              disabled: true,
            },
          },
        },
      ],
    };
  },
};
BI.shortcut(className, BI.inherit(BI.Widget, Widget));
export default className;