import { shortcut } from '@core/core';
import { POOL_CONFIG, PROXY_CONFIG, BASIC_CONFIG, CONNECT_CHARSET } from '@constants/constant';
import { FormItem } from './components/form_item/form_item';
import { PoolEdit } from './components/pool/pool_edit';
import { ProxyEdit } from './components/proxy/proxy_edit';
@shortcut()
export class RedisEdit extends BI.Widget {
    static xtype = 'dec.dcm.connection.plugin.redis.edit';
    props = {
        value: {
            basicConfig : {
                ...BASIC_CONFIG,
            },
            poolConfig: {
                ...POOL_CONFIG,
            },
            proxyConfig: {
                ...PROXY_CONFIG,
            },
        },
    }

    host: any;
    port: any;
    password: any;
    originalCharsetName: any;
    poolConfig: PoolEdit;
    proxyConfig: ProxyEdit;

    poolConfigData = POOL_CONFIG;
    proxyConfigData = PROXY_CONFIG;
    oldPassword = '';

    render() {
        const value = BI.get(this.options, 'value');
        const basicConfig = BI.get(value, 'basicConfig', BASIC_CONFIG);
        const poolConfig = BI.get(value, 'poolConfig', POOL_CONFIG);
        const proxyConfig = BI.get(value, 'proxyConfig', PROXY_CONFIG);
        const { host, port, password, originalCharsetName } = basicConfig;
        this.poolConfigData = poolConfig;
        this.proxyConfigData = proxyConfig;
        this.oldPassword = password;

        return {
            type: BI.VerticalLayout.xtype,
            hgap: 15,
            vgap: 10,
            items: [
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Host'),
                    forms: [{
                        type: BI.TextEditor.xtype,
                        width: 300,
                        allowBlank: true,
                        ref: _ref => {
                            this.host = _ref;
                        },
                        value: host,
                    }],
                },
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Port'),
                    forms: [{
                        type: BI.TextEditor.xtype,
                        width: 300,
                        allowBlank: true,
                        ref: _ref => {
                            this.port = _ref;
                        },
                        value: port,
                    }],
                },
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Password'),
                    forms: [{
                        type: BI.Editor.xtype,
                        cls: 'bi-border',
                        height: 20,
                        width: 300,
                        allowBlank: true,
                        ref: _ref => {
                            this.password = _ref;
                        },
                        value: password,
                        inputType: 'password',
                    }],
                },
                {
                    type: BI.FloatLeftLayout.xtype,
                    hgap: 20,
                    items: [
                        {
                            type: BI.TextButton.xtype,
                            cls: 'bi-high-light',
                            text: BI.i18nText('Plugin-Redis_Pool_Config'),
                            handler: () => {
                                const id = BI.UUID();
                                BI.Popovers.create(id, {
                                    type: BI.BarPopover.xtype,
                                    width: 500,
                                    height: 320,
                                    header: BI.i18nText('Plugin-Redis_Pool_Config'),
                                    body: {
                                        type: PoolEdit.xtype,
                                        poolConfig: this.poolConfigData,
                                        ref: (_ref: any) => {
                                            this.poolConfig = _ref;
                                        },
                                    },
                                    listeners: [{
                                        eventName: BI.Popover.EVENT_CONFIRM,
                                        action: () => {
                                            this.poolConfigData = this.poolConfig.getSubmitValue();
                                        },
                                    }],
                                }).open(id);
                            },
                        },
                        {
                            type: BI.TextButton.xtype,
                            cls: 'bi-high-light',
                            text: BI.i18nText('Plugin-Redis_Proxy_Config'),
                            handler: () => {
                                const id = BI.UUID();
                                BI.Popovers.create(id, {
                                    type: BI.BarPopover.xtype,
                                    width: 650,
                                    height: 320,
                                    header: BI.i18nText('Plugin-Redis_Pool_Config'),
                                    body: {
                                        type: ProxyEdit.xtype,
                                        proxyConfig: this.proxyConfigData,
                                        ref: (_ref: any) => {
                                            this.proxyConfig = _ref;
                                        },
                                    },
                                    listeners: [{
                                        eventName: BI.Popover.EVENT_CONFIRM,
                                        action: () => {
                                            this.proxyConfigData = this.proxyConfig.getSubmitValue();
                                        },
                                    }],
                                }).open(id);
                            },
                        },
                    ],
                },
                {
                    type: FormItem.xtype,
                    name: BI.i18nText('Plugin-Redis_Connection_Form_OriginalCharsetName'),
                    forms: [{
                        type: BI.TextValueCombo.xtype,
                        width: 300,
                        value: originalCharsetName ? originalCharsetName : '',
                        items: CONNECT_CHARSET,
                        ref: (_ref: any) => {
                            this.originalCharsetName = _ref;
                        },
                    }],
                },
            ],
        };
    }

    public getValue() {
        const originalCharsetName = this.originalCharsetName.getValue()[0] || '';
        
        return {
            basicConfig: {
                host: this.host.getValue(),
                port: this.port.getValue(),
                password: this.oldPassword === this.password.getValue() ? this.oldPassword : BI.encode(this.password.getValue()),
                newCharsetName: originalCharsetName ? 'gbk' : '',
                originalCharsetName,
            },
            poolConfig: this.poolConfigData,
            proxyConfig: this.proxyConfigData,
        };
    }
}