import FormMixin from '../../mixins/form'
import textinput from '../text_input'
import Selector from '../selector'
import Modal from '../../mixins/modal'
import toggler from '../toggler'


export default {
  name: 'edit-environment-role',

  mixins: [FormMixin, Modal],

  components: {
    toggler,
    Modal,
    Selector,
    textinput
  },

  props: {
    choices: Array,
    initialData: String,
    applicationId: String
  },

  data: function () {
    return {
      new_role: this.initialData,
    }
  },

  mounted: function() {
    this.$root.$on('revoke-' + this.applicationId, this.revoke)
  },

  methods: {
    change: function (e) {
      this.new_role = e.target.value
    },
    cancel: function () {
      this.new_role = this.initialData
    },
    revoke: function () {
      this.new_role = ""
    }
  },

  computed: {
    displayName: function () {
      const newRole = this.newRole
      for (var arr in this.choices) {
        if (this.choices[arr][0] == newRole) {
          return this.choices[arr][1].name
        }
      }
    },
    label_class: function () {
      return this.newRole === "" ?
        "label" : "label label--success"
    },
    newRole: function () {
      return this.new_role
    }
  },
}