<template>
  <v-row>
    <v-col>
      <div class="d-flex justify-space-between">
        <h2 class="ml-6 txt--text">{{ title }}</h2>
        <current-date-time showIcon class="mr-6" />
      </div>

      <accordion-card disableAccordion>
        <v-row>
          <v-col cols="12" sm="12" md="3">
            <v-subheader class="ml-10 txt--text font-weight-black">
              Zorgstandaard
            </v-subheader>
          </v-col>
          <v-col cols="12" sm="12" md="6">
            <v-text-field v-model="item.title" outlined> </v-text-field>
          </v-col>
          <v-col cols="12" sm="12" md="3"> </v-col>
        </v-row>

        <v-row>
          <v-col cols="12" sm="12" md="3">
            <v-subheader class="ml-10 txt--text font-weight-black">
              Externe link
            </v-subheader>
          </v-col>
          <v-col cols="12" sm="12" md="6">
            <v-text-field
              v-model="item.link"
              outlined
              prepend-inner-icon="icon-link"
            >
            </v-text-field>
          </v-col>
          <v-col cols="12" sm="12" md="3"> Voeg link toe</v-col>
        </v-row>
      </accordion-card>
    </v-col>

    <v-footer fixed style="z-index: 4" height="90" color="primary">
      <v-btn text nuxt :to="localePath('/manager/learning/quality-standards')">
        <v-icon>icon-arrow-left</v-icon>
      </v-btn>

      <v-btn
        v-cloak
        class="ma-2 white--text"
        color="txt"
        depressed
        rounded
        @click="save(true)"
        v-if="canSave && !isNew"
      >
        Opslaan</v-btn
      >

      <v-btn
        v-cloak
        class="ma-2 white--text"
        color="accent"
        depressed
        rounded
        @click="save(false)"
        v-if="canSave"
      >
        Opslaan en sluiten</v-btn
      >

      <v-spacer />

      <v-dialog v-model="dialog" persistent max-width="740">
        <template v-slot:activator="{ on }">
          <v-btn class="ma-2" tile text small v-if="!isNew" v-on="on">
            <v-icon class="mx-2">icon-remove</v-icon>
          </v-btn>
        </template>
        <v-card class="primary pa-10" flat>
          <v-card-title class="headline">
            {{
              $t('learning.product_overview.delete_confirmation', {
                productName: item.title,
              })
            }}
          </v-card-title>
          <v-card-actions>
            <div class="ma-4">
              <v-btn
                color="accent"
                class="mx-2"
                @click="deleteItem(item.id)"
                rounded
                depressed
                >{{ $t('general.delete') }}</v-btn
              >
              <v-btn
                class="mx-2"
                color="info"
                @click="close"
                rounded
                depressed
                >{{ $t('general.cancel') }}</v-btn
              >
            </div>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-footer>
  </v-row>
</template>

<script>
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
import currentDateTime from '@/components/CurrentDateTime/CurrentDateTime'
import PageHeader from '~/components/UI/PageHeader/PageHeader'

export default {
  layout: `${process.env.CUSTOMER}Admin`,
  middleware: 'adminsOrOperators',
  components: {
    accordionCard,
    PageHeader,
    currentDateTime,
  },
  data() {
    return {
      remoteItem: {},
      item: { title: null },
      dialog: false,
    }
  },
  mounted() {
    if (this.isSlugNumber) this.getFilter(this.slug)
    // if (!this.isNew) this.$router.push('/manager')
  },

  computed: {
    slug() {
      return this.$route.params.filter
    },
    isSlugNumber() {
      return !isNaN(this.slug.split(['-'], 1))
    },
    isNew() {
      return this.slug.toLowerCase() === 'new'
    },

    title() {
      if (!this.item || !this.item.title) return 'Nieuw'
      return this.item.title || ''
    },
    canSave() {
      if (this.isNew && this.itemFilled) return true
      if (this.itemFilled && this.itemHasChanges) return true
      return false
    },

    itemFilled() {
      if (!this.item || !this.item.title) return false
      return true
    },

    itemHasChanges() {
      return JSON.stringify(this.remoteItem) !== JSON.stringify(this.item)
    },
  },

  methods: {
    async getFilter(url) {
      if (!this.isSlugNumber) return

      this.$nextTick(() => this.$nuxt.$loading.start())

      try {
        const { data } = await this.$axios.get(`/filter-items/${url}`)

        this.remoteItem = { ...data }
        this.item = { ...data }

        this.$nuxt.$loading.finish()
      } catch (error) {
        this.$nuxt.$loading.finish()
        this.$notifier.showMessage({
          content: `Error getting the filter: ` + error.message,
          color: 'error',
          icon: 'icon-message',
        })
        this.$router.push('/manager/learning/quality-standards/')
      }
    },

    close() {
      this.dialog = false
    },

    async save(stay = false) {
      if (this.dialog) this.close()

      this.$nextTick(() => this.$nuxt.$loading.start())

      const QUALITY_STANDARD_ID = 14

      const data = {
        ...this.item,
        filter_id: this.item.filter_id || QUALITY_STANDARD_ID,
      }

      try {
        await this.$axios.post(`/filter-items`, data)

        this.remoteItem = { ...data }

        this.$nuxt.$loading.finish()

        if (!stay) this.$router.push('/manager/learning/quality-standards/')
      } catch (error) {
        this.$nuxt.$loading.finish()
        this.$notifier.showMessage({
          content: `Error creating the filter item: ` + error.message,
          color: 'error',
          icon: 'icon-message',
        })
      }
    },

    async deleteItem(itemId) {
      if (!itemId) {
        this.$notifier.showMessage({
          content: `No item to delete selected`,
          color: 'error',
          icon: 'icon-message',
        })
      }

      this.$nextTick(() => this.$nuxt.$loading.start())

      try {
        await this.$axios.delete(`/filter-items/${itemId}`)

        this.dialog = false

        this.$nuxt.$loading.finish()

        this.$notifier.showMessage({
          content: `Filter Item deleted`,
          color: 'success',
          icon: 'mdi-delete',
        })

        this.$router.push('/manager/learning/quality-standards/')
      } catch (error) {
        this.dialog = false
        this.$nuxt.$loading.finish()

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

        this.$router.push('/manager/learning/quality-standards/')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.v-dialog >>> .v-cardcard__title {
  word-break: break-word;
}
</style>
