<i18n>
{
  "en": {
  },
  "de": {
  }
}
</i18n>

<template>
  <div>
    <v-subheader>Info</v-subheader>
    <v-card>
      <v-card-text>
        <v-layout wrap>
          <v-flex sm6 xs12 order-xs2 order-sm1>
            <v-text-field box v-if="editMode" hide-details class="info-input" label="Name" color="primary" v-model="info.name"></v-text-field>
            <div v-else class="info-input">
              <div class="body-2">Name</div>
              {{ client.name || '-' }}
            </div>
          </v-flex>
          <v-flex sm6 xs12 order-xs1 order-sm2 class="text-xs-right">
            <div class="info-input">
              <v-btn v-if="!editMode" color="primary" flat @click="editInfo">
                <v-icon left>create</v-icon>Edit
              </v-btn>
              <div v-else>
                <v-btn color="primary" flat @click="cancelEdit">Cancel</v-btn>
                <v-btn color="primary" @click="saveInfo">
                  <v-icon left>save</v-icon>Save
                </v-btn>
              </div>
            </div>
          </v-flex>
        </v-layout>
        <v-layout wrap>
          <v-flex sm6 xs12>
            <v-textarea box v-if="editMode" rows="1" auto-grow hide-details class="info-input" label="Description" color="primary" v-model="info.description"></v-textarea>
            <div v-else class="info-input">
              <div class="body-2">Description</div>
              <pre>{{ client.description || '-' }}</pre>
            </div>
          </v-flex>
          <v-flex sm6 xs12>
            <v-autocomplete
              box
              v-if="editMode"
              class="info-input"
              :items="$store.state.groups.groupList"
              v-model="groupIds"
              hide-details
              offset-y
              label="Parents"
              color="primary"
              multiple
            >
              <template slot="selection" slot-scope="data">
                <v-chip :color="chipColor" :text-color="chipTextColor" small :selected="data.selected" @input="removeGroup(data.item.value)" close>
                  {{ data.item.text }}
                </v-chip>
              </template>
            </v-autocomplete>
            <div v-else class="info-input">
              <div class="body-2">Groups</div>
              <template v-if="client.groups && client.groups.length > 0">
                <v-chip v-for="group in client.groups" :key="group.id" small>
                  {{ group.name || group.id }}
                </v-chip>
              </template>
              <span v-else>-</span>
            </div>
          </v-flex>
        </v-layout>
        <v-layout wrap>
          <v-flex sm6 xs12>
            <v-text-field box v-if="editMode" hide-details class="info-input" label="IP Address" color="primary" v-model="info.ip"></v-text-field>
            <div v-else class="info-input">
              <div class="body-2">IP Address</div>
              {{ client.ip || '-' }}
            </div>
          </v-flex>
          <v-flex sm6 xs12>
            <v-text-field box v-if="editMode" hide-details class="info-input" label="MAC Address" color="primary" v-model="info.mac"></v-text-field>
            <div v-else class="info-input">
              <div class="body-2">MAC Address</div>
              {{ client.mac || '-' }}
            </div>
          </v-flex>
        </v-layout>
        <v-layout wrap>
          <v-flex sm6 xs12>
            <v-text-field box v-if="editMode" hide-details class="info-input" label="UUID" color="primary" v-model="info.uuid"></v-text-field>
            <div v-else class="info-input">
              <div class="body-2">UUID</div>
              {{ client.uuid || '-' }}
            </div>
          </v-flex>
        </v-layout>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
export default {
  name: 'GroupModuleClientView',
  props: ['tabIndex', 'client'],
  data () {
    return {
      editMode: false,
      info: {
        name: '',
        description: '',
        ip: '',
        mac: '',
        uuid: ''
      },
      groupIds: []
    }
  },
  created () {
    if (!this.client.id) this.editInfo()
  },
  watch: {
    client (newValue, oldValue) {
      if (!newValue.id) this.editInfo()
      else if (newValue.id !== oldValue.id) this.editMode = false
    }
  },
  computed: {
    chipColor () {
      return this.$store.state.settings.dark ? 'grey darken-1' : 'white'
    },
    chipTextColor () {
      return this.$store.state.settings.dark ? 'white' : 'black'
    }
  },
  methods: {
    removeGroup (id) {
      this.groupIds.splice(this.groupIds.indexOf(id), 1)
    },
    editInfo () {
      this.editMode = true
      this.info.name = this.client.name
      this.info.description = this.client.description
      if (this.client.groups) this.groupIds = this.client.groups.map(x => x.id)
    },
    cancelEdit () {
      this.editMode = false
      if (this.client.id) return
      this.$store.commit('groups/deleteFromTabChain', { index: this.tabIndex, count: 1 })
      this.$store.commit('groups/setActiveTab', this.tabIndex - 1)
    },
    saveInfo () {
      this.$store.dispatch('groups/saveClient', {
        id: this.client.id,
        info: this.info,
        groupIds: this.groupIds,
        tabIndex: this.tabIndex
      })
      this.editMode = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.info-input {
  margin: 10px;
}
</style>
