'use strict'
import 'lodash/lodash'

import ConfigField from './config_field'

$(document).ready(() => {
  new Vue({
    el: '#transport-section',
    components: {
      "config-field": ConfigField
    },
    props: [
      "transportType",
    ],
    propsData: {
      "transportType": "tcp"
    },
    data: function() {
      return {
        pluginType: null,
        pluginName: null,
        options: ["tcp", "tls"],
        commonOptions: [],
        advancedOptions: []

      }
    },
    computed: {
      token: function() {
        return Rails.csrfToken()
      }
    },
    filters: {
      toUpper: function(value) {
        return _.toUpper(value)
      }
    },
    beforeMount: function() {
      this.pluginType = this.$el.attributes.pluginType.nodeValue
      this.pluginName = this.$el.attributes.pluginName.nodeValue
    },
    mounted: function() {
    },
    methods: {
      onChange: function() {
        console.log(this.pluginType, this.pluginName, this.transportType)
        this.updateSection()
      },

      updateSection: function() {
        if (this.transportType === "tcp") {
          return
        }
        $.ajax({
          method: "GET",
          url: "/api/config_definitions",
          headers: {
            'X-CSRF-Token': this.token
          },
          data: {
            type: this.pluginType,
            name: this.pluginName
          }
        }).then((data) => {
          this.commonOptions = data.transport.commonOptions
          this.advancedOptions = data.transport.advancedOptions
        })
      }
    }
  })
})