<i18n>
{
  "en": {
    "syncOptions": "Synchronise Settings",
    "syncType": "Sync type",
    "noResultsCombobox": "No results matching \" {search} \". Press <kbd>enter</kbd> to create a new one"
  },
  "de": {
    "syncOptions": "Synchronisierungseinstellungen",
    "syncType": "Synchronisierungstyp",
    "noResultsCombobox": "Kein resultat für \" {search} \" gefunden. Drücke <kbd>enter</kbd>, um ein neues zu erstellen"
  }
}
</i18n>
<template>
  <v-dialog
    :value="$store.state.backends.sync"
    @input="$store.commit('backends/setSync', $event)"
    max-width="500px"
    scrollable
  >
  <v-card>
    <v-card-title class="elevation-3">
      <div class="headline">{{ $t('syncOptions') }}</div>
    </v-card-title>
    <v-card-text style="height: 500px; padding: 40px">
      <v-select
      v-model="syncType"
      :items="syncTypes"
      :label="$t('syncType')"
      menu-props="offsetY"
      prepend-icon="settings_ethernet"
      ></v-select>
      <v-combobox v-if="objectTypes.length === 0"
        v-model="cbxGroups"
        :items="clientFilteredTypes"
        item-text="title"
        item-value="id"
        small-chips
        multiple
        :label="$t('groups')"
        :search-input.sync="searchGroups"
        hide-selected
        deletable-chips
        return-object
        prepend-icon="device_hub"
      >
        <template slot="no-data">
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title>
                <p v-html="$t('noResultsCombobox', { search: searchGroups })"></p>
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </template>
      </v-combobox>
      <v-autocomplete v-else
        v-model="cbxGroups"
        :items="clientFilteredTypes"
        item-text="title"
        item-value="id"
        small-chips
        multiple
        :label="$t('groups')"
        :search-input.sync="searchGroups"
        hide-selected
        deletable-chips
        return-object
        prepend-icon="device_hub"
      ></v-autocomplete>
      <v-combobox v-if="objectTypes.length === 0"
        v-model="cbxClients"
        :items="groupFilteredTypes"
        item-text="title"
        item-value="id"
        small-chips
        multiple
        :label="$t('clients')"
        hide-selected
        deletable-chips
        return-object
        prepend-icon="computer"
      >
        <template slot="no-data">
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title>
                No results matching "<strong>{{ searchClients }}</strong>". Press <kbd>enter</kbd> to create a new one
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </template>
      </v-combobox>
      <v-autocomplete v-else
        v-model="cbxClients"
        :items="groupFilteredTypes"
        item-text="title"
        item-value="id"
        small-chips
        multiple
        :label="$t('clients')"
        hide-selected
        deletable-chips
        return-object
        prepend-icon="computer"
      ></v-autocomplete>
    </v-card-text>
    <v-divider></v-divider>
    <v-card-actions>
      <v-flex xl10 offset-xl2 lg12 text-right>
        <v-btn text @click.native="$store.commit('backends/setSync', false)">{{ $t('cancel') }}</v-btn>
        <v-btn @click.native="save" class="primary" raised>{{ $t('save') }}</v-btn>
      </v-flex>
    </v-card-actions>
  </v-card>
  </v-dialog>
</template>

<script>

export default {
  props: ['backendId'],
  components: {
  },
  data () {
    return {
      objectTypes: [],
      searchGroups: '',
      searchClients: '',
      cbxGroups: null,
      cbxClients: null,
      syncTypes: [],
      syncType: ''
    }
  },
  methods: {
    save (event) {
      this.$http.put('/api/backends/' + this.backendId + '/syncsettings', {
        id: this.backendId,
        groups: this.cbxGroups,
        clients: this.cbxClients,
        sync: this.syncType
      }).then(response => {
        // TODO: Add saved successfull msg.
        this.$store.commit('backends/setSync', false)
      }).catch(error => {
        console.log(error)
      })
    }
  },
  computed: {
    groupFilteredTypes () {
      var types = this.objectTypes
      types = types.filter(e => {
        const g = this.cbxGroups.find(x => x.id === e.id && x.title === e.title)
        return !g
      })
      return types
    },
    clientFilteredTypes () {
      var types = this.objectTypes
      types = types.filter(e => {
        const c = this.cbxClients.find(y => y.id === e.id && y.title === e.title)
        return !c
      })
      return types
    },
    sync: function () {
      return this.$store.state.backends.sync
    }
  },
  watch: {
    sync: function (value) {
      if (value) {
        // Load the sync types from the backend.
        this.$http('/api/backends/' + this.backendId + '/synctypes').then(response => {
          this.syncTypes = response.data
        })
        // Load the object types from the backend.
        this.$http('/api/backends/' + this.backendId + '/objecttypes').then(response => {
          this.objectTypes = response.data
        })

        this.$http('/api/backends/' + this.backendId + '/syncsettings').then(response => {
          this.cbxGroups = response.data.groups
          this.cbxClients = response.data.clients
          this.syncType = response.data.sync
        })
      }
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
