<i18n>
{
  "en": {
    "hooks": "Registration Hooks",
    "hooksInOrder": "Registration Hooks (In Order of Execution)",
    "createHook": "Create hook",
    "groupRestricted": "Restriced to selected groups"
  },
  "de": {
    "hooks": "Registrierungs Hooks",
    "hooksInOrder": "Registration Hooks (In Ausführungsreihenfolge)",
    "createHook": "Hook erstellen",
    "groupRestricted": "Auf ausgewählte Gruppen beschränkt"
  }
}
</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" :background-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('hooksInOrder') }}</v-subheader>
            <v-card v-if="hooks.length > 0">
              <v-list two-line>
                <draggable :value="hooks" @input="setHooks($event)" handle=".handle">
                  <v-list-item v-for="(hook, index) in hooks" :key="hook.id" @click.stop @dblclick="editHook(hook)">
                    <v-list-item-action class="handle">
                      <v-icon class="mr-6">drag_handle</v-icon>{{ index + 1 }}
                    </v-list-item-action>
                    <v-list-item-content>
                      <v-list-item-title>{{ hook.name }}<small class="type">{{ hook.type }}</small></v-list-item-title>
                      <v-list-item-subtitle>{{ hook.description }}</v-list-item-subtitle>
                    </v-list-item-content>
                    <v-tooltip v-if="hook.groups.length > 0" top>
                      <template #activator="{ on }">
                        <v-icon v-on="on" small class="mr-6">category</v-icon>
                      </template>
                      <span>{{ $t('groupRestricted') }}</span>
                    </v-tooltip>
                    <v-list-item-action>
                      <v-btn @click="editHook(hook)" icon><v-icon color="primary">edit</v-icon></v-btn>
                    </v-list-item-action>
                    <v-list-item-action class="delete">
                      <v-btn @click="deleteHook(hook)" icon><v-icon color="error">delete</v-icon></v-btn>
                    </v-list-item-action>
                  </v-list-item>
                </draggable>
              </v-list>
            </v-card>
            <div class="text-right">
              <v-btn text color="success" @click="createHook" class="ma-2"><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: 8px;
  margin-right: 24px;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.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>
