<i18n>
{
  "en": {
    "hooks": "Registration hooks",
    "createHook": "Create hook"
  },
  "de": {
    "hooks": "Registrierungs Hooks ",
    "createHook": "Hook erstellen"
  }
}
</i18n>

<template>
  <v-container fill-height>
    <v-layout>
      <v-flex xl10 offset-xl1 lg12>
        <v-card class="tabbar-card">
          <v-tabs v-model="tabs" grow hide-slider :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
              <v-tab><v-icon class="tabbar-tabicon">extension</v-icon>{{ $t('hooks') }}</v-tab>
          </v-tabs>
        </v-card>
        <v-tabs-items v-model="tabs" style="padding-bottom: 20px">
          <v-tab-item>
            <v-subheader>{{ $t('hooks') }}</v-subheader>
            <v-card v-if="hooks.length > 0">
              <v-list two-line>
                <draggable :value="hooks" @input="setHooks($event)" :options="{ handle:'.handle' }">
                  <v-list-tile v-for="hook in hooks" :key="hook.id" @click.stop @dblclick="editHook(hook)">
                    <v-list-tile-action class="handle">
                      <v-icon>drag_handle</v-icon>
                    </v-list-tile-action>
                    <v-list-tile-content>
                      <v-list-tile-title>{{ hook.name }}<small class="type">{{ hook.type }}</small></v-list-tile-title>
                      <v-list-tile-sub-title>{{ hook.description }}</v-list-tile-sub-title>
                    </v-list-tile-content>
                    <v-icon v-if="hook.groups.length > 0">device_hub</v-icon>
                    <v-list-tile-action>
                      <v-btn @click="editHook(hook)" icon><v-icon color="primary">edit</v-icon></v-btn>
                    </v-list-tile-action>
                    <v-list-tile-action class="delete">
                      <v-btn @click="deleteHook(hook)" icon><v-icon color="error">delete</v-icon></v-btn>
                    </v-list-tile-action>
                  </v-list-tile>
                </draggable>
              </v-list>
            </v-card>
            <div class="text-xs-right">
              <v-btn flat color="success" @click="createHook"><v-icon left>create</v-icon>{{ $t('createHook') }}</v-btn>
            </div>
          </v-tab-item>
        </v-tabs-items>
      </v-flex>
    </v-layout>
    <v-dialog
      :value="dialog.show"
      @input="setDialog({ show: $event })"
      :max-width="dialog.type === 'delete' ? '500px' : '1200px'"
      scrollable
      :persistent="dialog.type !== 'delete'"
      :fullscreen="$vuetify.breakpoint.smAndDown"
    >
      <registration-module-delete v-show="dialog.type === 'delete'" />
      <registration-module-edit v-show="dialog.type === 'edit'"/>
    </v-dialog>
  </v-container>
</template>

<script>
import draggable from 'vuedraggable'
import RegistrationModuleDelete from '@/components/RegistrationModuleDelete'
import RegistrationModuleEdit from '@/components/RegistrationModuleEdit'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  name: 'RegistrationModule',
  components: {
    draggable,
    RegistrationModuleDelete,
    RegistrationModuleEdit
  },
  data () {
    return {
      tabs: 0
    }
  },
  computed: {
    ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
    ...mapState('registration', ['hooks', 'dialog'])
  },
  methods: {
    ...mapMutations('registration', ['setDialog']),
    ...mapActions('registration', ['setHooks']),
    deleteHook (hook) {
      this.setDialog({ show: true, type: 'delete', info: hook })
    },
    editHook (hook) {
      this.setDialog({ show: true, type: 'edit', info: hook })
    },
    createHook () {
      this.setDialog({ show: true, type: 'edit', info: {} })
    }
  },
  created () {
    this.$store.dispatch('groups/loadGroupList')
    this.$store.dispatch('registration/loadHooks')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.handle {
  margin-left: 12px;
}
.delete {
  margin-right: 12px;
}
.type {
  margin-left: 24px;
}
.hook-info {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.hook-info > .hook-type {
  min-width: 60px;
}
.hook-info > .hook-name {
  white-space: nowrap;
}
.hook-info > .hook-description {
  margin-left: 40px;
  overflow: hidden;
  white-space: nowrap;
}
</style>
