{{define "outboundModal"}}
<a-modal id="out-modal" v-model="outModal.visible" :title="outModal.title" @ok="outModal.ok"
         :confirm-loading="outModal.confirmLoading" :closable="true" :mask-closable="false"
         :ok-button-props="{ props: { disabled: !outModal.isValid } }" style="overflow: hidden;" width="800px" body-style="padding: 0;"
         :ok-text="outModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
    {{template "form/outbound"}}
</a-modal>
<script>
    const outboundCmOptions = {
        lineNumbers: true,
        mode: "application/json",
        lint: true,
        theme: "xq",
        lineWrapping: true,
        indentUnit: 2,
        tabSize: 2,
    };

    const outModal = {
        title: '',
        visible: false,
        confirmLoading: false,
        okText: '{{ i18n "confirm" }}',
        isEdit: false,
        confirm: null,
        outbound: new Outbound(),
        jsonMode: false,
        link: '',
        cm: null,
        duplicateTag: false,
        isValid: true,
        activeKey: 'ob-settings',
        tags: [],
        ok() {
            ObjectUtil.execute(outModal.confirm, outModal.outbound.toJson());
        },
        onTabChange(activeKey) {
            this.activeKey = activeKey;
            if (activeKey === 'ob-json') {
                setTimeout(() => this.initJsonEditor(), 0);
            } else {
                this.destroyJsonEditor();
            }
        },
        show({ title='', okText='{{ i18n "confirm" }}', outbound, confirm=(outbound)=>{}, isEdit=false, tags=[] }) {
            this.title = title;
            this.okText = okText;
            this.confirm = confirm;
            this.jsonMode = false;
            this.link = '';
            this.destroyJsonEditor();
            this.activeKey = 'ob-settings';
            this.visible = true;
            this.outbound = isEdit ? Outbound.fromJson(outbound) : new Outbound();
            this.isEdit = isEdit;
            this.tags = tags;
            this.check();
        },
        close() {
            outModal.visible = false;
            outModal.loading(false);
        },
        loading(loading=true) {
            outModal.confirmLoading = loading;
        },
        check() {
            if (outModal.outbound.tag == '' || outModal.tags.includes(outModal.outbound.tag)) {
                this.duplicateTag = true;
                this.isValid = false;
            } else {
                this.duplicateTag = false;
                this.isValid = true;
            }
        },
        initJsonEditor() {
            const textAreaObj = document.getElementById('outboundJson');
            if (!textAreaObj) return;
            this.destroyJsonEditor();
            textAreaObj.value = JSON.stringify(this.outbound.toJson(), null, 2);
            this.cm = CodeMirror.fromTextArea(textAreaObj, outboundCmOptions);
            this.cm.on('change', editor => {
                const value = editor.getValue();
                if (this.isJsonString(value)) {
                    this.outbound = Outbound.fromJson(JSON.parse(value));
                    this.check();
                }
            });
        },
        destroyJsonEditor() {
            if (this.cm != null) {
                this.cm.toTextArea();
                this.cm = null;
            }
        },
        toggleJson(jsonTab) {
            if (jsonTab) {
                this.activeKey = 'ob-json';
                setTimeout(() => this.initJsonEditor(), 0);
            } else {
                this.destroyJsonEditor();
            }
        },
        isJsonString(str) {
            try {
                JSON.parse(str);
            } catch (e) {
                return false;
            }
            return true;
        },
    };

    new Vue({
        delimiters: ['[[', ']]'],
        el: '#out-modal',
        data: {
            outModal: outModal,
            get outbound() {
                return outModal.outbound;
            },
        },
        methods: {
            streamNetworkChange() {
                if (this.outModal.outbound.protocol == Protocols.VLESS && !outModal.outbound.canEnableTlsFlow()) {
                    delete this.outModal.outbound.settings.flow;
                }
            },
            canEnableTls() {
                return this.outModal.outbound.canEnableTls();
            },
            convertLink() {
                const newOutbound = Outbound.fromLink(outModal.link);
                if (newOutbound) {
                    this.outModal.outbound = newOutbound;
                    this.outModal.toggleJson(true);
                    this.outModal.check();
                    this.$message.success('Link imported successfully...');
                    outModal.link = '';
                } else {
                    this.$message.error('Wrong Link!');
                    outModal.link = '';
                }
            },

            async getTlsPing() {
                const options = {
                    'domain': this.outbound.stream.tls.serverName || this.outbound.settings.address,
                    'port': this.outbound.settings.port || 443,
                }
                outModal.confirmLoading = true;
                this.outbound.stream.tls.pinnedPeerCertSha256 = "";
                const msg = await HttpUtil.post('/server/getTlsPing', options);
                if (msg.success) {
                    this.outbound.stream.tls.pinnedPeerCertSha256 = msg.obj.leafHash;
                }
                outModal.confirmLoading = false;
            }
        },
    });
</script>
{{end}}