<template>
  <div class="vn-pp row justify-center">
    <div
      v-if="addresses && !addresses.length"
      class="text-subtitle1 text-center text-grey-7 q-pa-md">
      {{$t('noDataFound')}}
    </div>
    <q-card class="vn-w-md">
      <q-list bordered separator>
        <q-item
          v-for="(address, index) in addresses"
          :key="address.id"
          :to="`/address/${address.id}`"
          clickable
          v-ripple>
          <q-item-section side top>
            <q-radio
              v-model="defaultAddress"
              :val="address.id"
              :title="$t('setAsDefault')"/>
          </q-item-section>
          <q-item-section>
            <q-item-label class="ellipsis">
              {{address.nickname}}
            </q-item-label>
            <q-item-label class="ellipsis" caption>
              {{address.street}}
            </q-item-label>
            <q-item-label class="ellipsis" caption>
              {{address.postalCode}} {{address.city}}
            </q-item-label>
          </q-item-section>
          <q-item-section side top>
            <q-btn
              icon="delete"
              @click="deleteAddress(index, $event)"
              :title="$t('delete')"
              size="12px"
              flat
              dense
              round/>
          </q-item-section>
        </q-item>
      </q-list>
    </q-card>
    <q-dialog v-model="confirm" persistent>
      <q-card>
        <q-card-section class="row items-center">
          {{$t('areYouSureDeleteAddress')}}
        </q-card-section>
        <q-card-actions align="right">
          <q-btn
            :label="$t('cancel')"
            v-close-popup
            flat
            color="primary"/>
          <q-btn
            :label="$t('accept')"
            @click="confirmDeletion(deleteIndex)"
            v-close-popup
            flat
            color="primary"/>
        </q-card-actions>
      </q-card>
    </q-dialog>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-btn
        fab
        icon="add"
        color="accent"
        to="/address"
        :title="$t('add')"
      />
    </q-page-sticky>
  </div>
</template>

<script>
export default {
  name: 'Addresses',
  data () {
    return {
      addresses: null,
      defaultAddress: null,
      confirm: false
    }
  },
  mounted () {
    let filter = {
      fields: [
        'id',
        'nickname',
        'street',
        'city',
        'postalCode'
      ],
      where: {
        clientFk: this.$state.user.id,
        isActive: true
      },
      order: 'nickname'
    }
    this.$axios.get('Addresses', { params: { filter } })
      .then(res => (this.addresses = res.data))

    filter = {
      fields: ['defaultAddressFk']
    }
    this.$axios.get(`Clients/${this.$state.user.id}`, { params: { filter } })
      .then(res => (this.defaultAddress = res.data.defaultAddressFk))
  },
  watch: {
    defaultAddress (value, oldValue) {
      if (!oldValue) return
      let data = { defaultAddressFk: value }
      this.$axios.patch(`Clients/${this.$state.user.id}`, data)
        .then(res => {
          this.$q.notify(this.$t('addressSetAsDefault'))
        })
    }
  },
  methods: {
    deleteAddress (index, event) {
      event.preventDefault()
      event.stopPropagation()
      this.confirm = true
      this.deleteIndex = index
    },
    confirmDeletion (index) {
      let address = this.addresses[index]
      let data = { isActive: false }
      this.$axios.patch(`Addresses/${address.id}`, data)
        .then(res => {
          this.addresses.splice(index, 1)
          this.$q.notify(this.$t('addressRemoved'))
        })
    }
  }
}
</script>
