<template>
  <accordion-card :title="$t('learning.product_overview.accreditation')">
    <v-data-table
      :headers="headers"
      :items="accreditations"
      :options="options"
      hide-default-footer
      item-key="accreditation"
      flat
      v-if="hasAccreditations"
    >
      <!-- Translates dynamically headers -->
      <template v-for="h in headers" v-slot:[`header.${h.value}`]="{ header }">
        {{ h.text ? $t(`learning.accreditation.${h.text}`) : '' }}
      </template>

      <template v-slot:item.register="{ item }">
        {{ getFilterItem('register', item).title }}
      </template>

      <template v-slot:item.date_start="{ item }">
        {{ formatDate(item.date_start) }}
      </template>

      <template v-slot:item.date_end="{ item }">
        {{ formatDate(item.date_end) }}
      </template>

      <template v-slot:item.actions="{ item }">
        <v-menu
          offset-y
          v-if="
            editMode && ($store.getters.isAdmin || $store.getters.isOperator)
          "
        >
          <template v-slot:activator="{ on }">
            <v-hover v-slot:default="{ hover }">
              <v-btn
                :color="hover ? 'info' : ''"
                :outlined="hover"
                depressed
                fab
                small
                v-on="on"
              >
                <v-icon>icon-options</v-icon>
              </v-btn>
            </v-hover>
          </template>
          <v-list width="200">
            <v-list-item @click="editItem(item)">
              <v-list-item-icon class="mr-1">
                <v-icon small>icon-edit</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-subtitle>{{
                  $t('general.edit') | capitalize
                }}</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-dialog max-width="740" persistent v-model="dialogDelete">
              <template v-slot:activator="{ on }">
                <v-list-item v-on="on">
                  <v-list-item-icon class="mr-1">
                    <v-icon small>icon-remove</v-icon>
                  </v-list-item-icon>

                  <v-list-item-content>
                    <v-list-item-subtitle>{{
                      $t('general.delete') | capitalize
                    }}</v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
              </template>
              <v-card class="primary pa-10" flat>
                <v-card-title class="headline">
                  {{ $t('learning.delete_accreditation_confirmation') }}
                </v-card-title>
                <v-card-actions>
                  <div class="ma-4">
                    <v-btn
                      @click="deleteItem(item)"
                      class="mx-2"
                      color="accent"
                      depressed
                      rounded
                      >{{ $t('general.delete') }}</v-btn
                    >
                    <v-btn
                      @click="dialogDelete = false"
                      class="mx-2"
                      color="info"
                      depressed
                      rounded
                      >{{ $t('general.cancel') }}</v-btn
                    >
                  </div>
                </v-card-actions>
              </v-card>
            </v-dialog>
          </v-list>
        </v-menu>
      </template>
    </v-data-table>

    <v-dialog
      v-model="dialogAccreditation"
      max-width="75%"
      v-if="editMode && ($store.getters.isAdmin || $store.getters.isOperator)"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          class="cta-secondary my-10"
          block
          depressed
          min-height="60px"
          :disabled="isCreateMode"
          v-on="on"
          @click="resetAccreditationsFilters"
        >
          <v-icon x-small class="mx-4">icon-add</v-icon>

          {{ $t('learning.add_new_accreditation') }}</v-btn
        >
      </template>
      <v-card>
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>

        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12" sm="12" md="3">
                <v-subheader class="txt--text font-weight-black">{{
                  $t(`learning.filters.register`)
                }}</v-subheader>
              </v-col>
              <v-col cols="12" sm="12" md="6">
                <universalFilterSelector
                  filterTitle="register"
                  :editMode="editMode"
                  target="accreditations"
                />
              </v-col>
              <v-col cols="12" sm="12" md="3">
                <v-text-field
                  v-model="editedItem.credits"
                  :outlined="editMode"
                  :solo="!editMode"
                  :disabled="!editMode"
                  :flat="!editMode"
                ></v-text-field>
              </v-col>
            </v-row>

            <v-row>
              <v-col cols="12" sm="12" md="3">
                <v-subheader class="txt--text font-weight-black">{{
                  $t('learning.accreditation_period')
                }}</v-subheader>
              </v-col>
              <v-col cols="12" sm="12" md="9" class="d-flex pl-2">
                <v-menu
                  ref="menuStart"
                  v-model="menuStart"
                  :close-on-content-click="false"
                  transition="scale-transition"
                  offset-y
                  margin-top="20px"
                  min-width="290px"
                >
                  <template v-slot:activator="{ on, attrs }">
                    <v-text-field
                      :name="`accreditation-start-date-${Math.random()}`"
                      v-model="computedDateFormattedStart"
                      append-icon="icon-events"
                      max-height="100px"
                      v-bind="attrs"
                      v-on="on"
                      readonly
                      :outlined="editMode"
                      :solo="!editMode"
                      :disabled="!editMode"
                      :flat="!editMode"
                    >
                      <template v-slot:append>
                        <v-icon v-on="on">icon-events</v-icon>
                      </template>
                    </v-text-field>
                  </template>
                  <v-date-picker
                    v-model="editedItem.date_start"
                    no-title
                    scrollable
                    :disabled="!editMode"
                    :flat="!editMode"
                    locale="nl-NL"
                  >
                    <v-spacer></v-spacer>
                    <v-btn text @click="menuStart = false">Cancel</v-btn>
                    <v-btn
                      text
                      @click="$refs.menuStart.save(editedItem.date_start)"
                      >OK</v-btn
                    >
                  </v-date-picker>
                </v-menu>
                <span class="mx-5 my-3 font-weight-bold">
                  tot
                </span>
                <v-menu
                  ref="menuEnd"
                  v-model="menuEnd"
                  :close-on-content-click="false"
                  transition="scale-transition"
                  offset-y
                  min-width="290px"
                >
                  <template v-slot:activator="{ on, attrs }">
                    <v-text-field
                      :name="`accreditation-end-date-${Math.random()}`"
                      v-model="computedDateFormattedEnd"
                      append-icon="icon-events"
                      readonly
                      :outlined="editMode"
                      :solo="!editMode"
                      :disabled="!editMode"
                      :flat="!editMode"
                      max-height="100px"
                      v-bind="attrs"
                      v-on="on"
                    >
                      <template v-slot:append>
                        <v-icon v-on="on">icon-events</v-icon>
                      </template>
                    </v-text-field>
                  </template>
                  <v-date-picker
                    v-model="editedItem.date_end"
                    no-title
                    scrollable
                    :disabled="!editMode"
                    :flat="!editMode"
                    locale="nl-NL"
                  >
                    <v-spacer></v-spacer>
                    <v-btn text @click="menuEnd = false">Cancel</v-btn>
                    <v-btn text @click="$refs.menuEnd.save(editedItem.date_end)"
                      >OK</v-btn
                    >
                  </v-date-picker>
                </v-menu>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>

        <v-divider />
        <v-card-actions v-if="editMode">
          <v-btn
            class="ma-2 white--text"
            color="info"
            depressed
            rounded
            :disabled="loading"
            @click="save"
            >{{ $t('general.save') }}</v-btn
          >
          <v-spacer />
          <v-btn
            class="ma-2 white--text"
            color="txt"
            depressed
            text
            :disabled="loading"
            @click="close"
            >{{ $t('general.cancel') }}</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>

    <p v-if="isCreateMode" class="text-center">
      Bij het aanmaken van een nieuw product kiest u eerst voor 'Opslaan' om
      deze functie te activeren.
    </p>
  </accordion-card>
</template>

<script>
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
import universalFilterSelector from '@/components/UniversalFilterSelector/UniversalFilterSelector'

export default {
  components: {
    accordionCard,
    universalFilterSelector,
  },
  props: {
    editMode: {
      type: Boolean,
      default: false,
    },
    isCreateMode: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      options: {
        itemsPerPage: -1,
      },
      headers: [
        { text: 'register', value: 'register' },
        { text: 'credits', value: 'credits' },
        { text: 'date_start', value: 'date_start' },
        { text: 'date_end', value: 'date_end' },
        { text: '', value: 'actions' },
      ],
      accreditationEditMode: false,
      dialogAccreditation: false,
      dialogDelete: false,
      editedIndex: -1,
      editedItem: {
        date_start: '',
        date_end: '',
        credits: '',
      },
      defaultItem: {
        date_start: '',
        date_end: '',
        credits: '',
      },
      loading: false,
      date: null,
      menuStart: false,
      menuEnd: false,
    }
  },
  computed: {
    remote() {
      return this.$store.state.learning.remote
    },
    local() {
      return this.$store.state.learning.local
    },
    accreditations() {
      if (!this.local || !Array.isArray(this.local.accreditations)) return []
      return this.local.accreditations
    },
    hasAccreditations() {
      if (!this.accreditations) return false
      return this.accreditations.length > 0
    },
    formTitle() {
      return this.editedIndex === -1
        ? this.$t('learning.new_accreditation')
        : this.$t('learning.edit_accreditation')
    },
    accreditationsFiltersSelected() {
      return this.$store.state.learning.accreditationsFiltersSelected
    },
    computedDateFormattedStart() {
      return this.formatDate(this.editedItem.date_start)
    },
    computedDateFormattedEnd() {
      return this.formatDate(this.editedItem.date_end)
    },
  },

  watch: {
    dialogAccreditation(val) {
      val || this.close()
    },
  },

  methods: {
    getFilterItem(filterTitle, accreditation) {
      const filter = this.$store.getters.getFilterByTitle(filterTitle)

      const arrayTmp = []
      if (!accreditation.filters) return {}
      accreditation.filters.forEach((f) => {
        const filterItemTmp = this.$store.getters.getFilterItemById(
          f.filter_item_id
        )
        arrayTmp.push(filterItemTmp)
      })

      const filterItem = arrayTmp.find((e) => e.filter_id === filter.id)
      return filterItem || {}
    },
    formatDate(date) {
      if (!date) return null

      const [year, month, day, time] = date.replace(' ', '-').split('-')
      return `${day}/${month}/${year}`
    },

    resetAccreditationsFilters() {
      this.$store.commit('learning/RESET_ACCREDITATIONS_FILTERS')
    },

    setAccreditationsFilters(item) {
      item.filters.forEach(async (f) => {
        const filterItem = this.$store.getters.getFilterItemById(
          f.filter_item_id
        )

        await this.$store.commit('learning/UPDATE_FILTERS', {
          filterId: filterItem.filter_id,
          target: 'accreditations',
          value: f.filter_item_id,
        })
      })

      this.editedIndex = this.accreditations.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.$forceUpdate()
    },

    close() {
      this.dialogAccreditation = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      })
    },

    setFiltersSelectedInEditedItem() {
      let accreditationFiltersItemsIds = []

      for (const [key, value] of Object.entries(
        this.accreditationsFiltersSelected
      )) {
        accreditationFiltersItemsIds.push(value)
      }

      this.editedItem['filter_items'] = accreditationFiltersItemsIds
    },

    editItem(item) {
      if (!this.editMode) return
      this.setAccreditationsFilters(item)
      this.dialogAccreditation = true
    },

    async deleteItem(item) {
      this.$nextTick(() => this.$nuxt.$loading.start())
      if (!item.id) {
        this.$notifier.showMessage({
          content: `No accredication to delete selected`,
          color: 'error',
          icon: 'icon-message',
        })
      }

      try {
        const response = await this.$axios.delete(`/accreditations/${item.id}`)

        this.$store.commit('learning/DELETE_ACCREDITATION_LOCAL', item)

        this.dialogDelete = false
        this.dialogAccreditation = false
        this.$nuxt.$loading.finish()

        this.$notifier.showMessage({
          content: `Accreditation deleted`,
          color: 'success',
          icon: 'mdi-delete',
        })
      } catch (error) {
        this.$nuxt.$loading.finish()
        this.$notifier.showMessage({
          content: `Error trying to delete the selected accreditation`,
          color: 'error',
          icon: 'mdi-delete',
        })
      }
    },

    async save() {
      this.loading = true
      this.$nextTick(() => this.$nuxt.$loading.start())

      // Edit mode
      if (this.editedIndex > -1) {
        try {
          this.editedItem.learning_product_id = this.local.id

          this.setFiltersSelectedInEditedItem()

          const response = await this.$axios.post(
            '/accreditations',
            this.editedItem
          )

          this.$store.commit('learning/EDIT_ACCREDITATION_LOCAL', {
            index: this.editedIndex,
            accreditation: response.data,
          })

          this.dialogAccreditation = false

          this.$notifier.showMessage({
            content: `Accreditation stored`,
            color: 'success',
            icon: 'icon-checkmark',
          })
        } catch (error) {
          console.log('save -> error', error)

          this.dialogAccreditation = false

          this.$nuxt.$loading.finish()

          this.$notifier.showMessage({
            content: `Error trying to store the accreditation`,
            color: 'error',
            icon: 'mdi-delete',
          })
        }
        // Create new mode
      } else {
        try {
          this.editedItem.learning_product_id = this.local.id

          this.setFiltersSelectedInEditedItem()

          const response = await this.$axios.post(
            '/accreditations',
            this.editedItem
          )

          this.dialog = false

          this.$store.commit('learning/ADD_ACCREDITATION_LOCAL', response.data)

          this.$notifier.showMessage({
            content: `Accreditation stored`,
            color: 'success',
            icon: 'icon-checkmark',
          })
        } catch (error) {
          console.log('save -> error', error)

          this.dialogAccreditation = false

          this.$notifier.showMessage({
            content: `Error trying to store the accreditation`,
            color: 'error',
            icon: 'mdi-delete',
          })
        }
      }

      this.$nuxt.$loading.finish()
      this.loading = false
      this.close()
    },
  },
}
</script>

<style scoped>
.v-application >>> .v-menu__content{
  top: 230px !important;
}
.v-card >>> table,
.v-card >>> .v-data-table-header tr,
.v-card >>> .v-data-footer {
  background-color: var(--v-primary-base);
}
.v-card >>> .v-data-table-header th span {
  color: var(--v-tertiary-base);
}
.v-card >>> .text-start,
.v-card >>> .v-icon,
.v-dialog__content >>> .v-subheader,
.v-dialog__content >>> i {
  color: var(--v-txt-base);
  font-weight: bold;
}
.v-dialog__content >>> .v-dialog {
  border: 4px solid var(--v-secAccent-base);
  /* box-shadow: inset 0px 0px 2px 2px var(--v-secAccent-base),
    inset 6px 6px 14px -14px var(--v-secAccent-base) !important; */
}
.v-dialog .v-card {
  background: var(--v-secondary-base);
}

.v-dialog__content >>> .v-input__slot {
  background: var(--v-primary-base);
  border: 1px solid var(--v-lines-base);
}
.v-menu__content >>> .v-date-picker-table {
  height: 242px !important;
}
</style>
