<template>
  <div class="vn-pp row justify-center">
    <q-stepper
      v-model="step"
      vertical
      color="primary"
      animated
      class="vn-w-lg">
      <q-step
        name="method"
        :title="$t('deliveryMethod')"
        icon="person_pin"
        :done="step != 'method'">
        <section>
          <q-radio
            v-model="method"
            val="delivery"
            :label="$t('homeDelivery')"
          />
        </section>
        <section>
          <q-radio
            v-model="method"
            val="pickup"
            :label="$t('storePickup')"
          />
        </section>
        <q-stepper-navigation>
          <q-btn
            @click="step = 'when'"
            color="primary"
            label="Continue"
          />
        </q-stepper-navigation>
      </q-step>
      <q-step
        name="when"
        :title="$t(isPickup ? 'pickupDate' : 'deliveryDate')"
        icon="event"
        :done="step == 'how'">
        <div class="q-gutter-y-md">
          <q-select
            :label="$t(isPickup ? 'optionalAddress' : 'deliveryAddress')"
            v-model="address"
            :options="addresses"
            option-label="nickname">
            <template v-slot:append>
              <q-icon name="info">
                <q-tooltip>
                  <div style="max-width: 250px;">
                    {{ $t(isPickup ? 'optionalAddressInfo' : 'addressHint') }}
                  </div>
                </q-tooltip>
              </q-icon>
            </template>
            <template v-slot:option="scope">
              <q-item
                v-bind="scope.itemProps"
                v-on="scope.itemEvents">
                <q-item-section>
                  <q-item-label>{{ scope.opt.nickname }}</q-item-label>
                  <q-item-label caption>{{ scope.opt.street }}</q-item-label>
                </q-item-section>
              </q-item>
            </template>
          </q-select>
          <q-date
            v-model="date"
            :options="datesFn"
            minimal
            flat
            bordered
            class="full-width"
          />
        </div>
        <q-stepper-navigation>
          <q-btn
            label="Continue"
            @click="step = 'how'"
            color="primary"
          />
          <q-btn
            label="Back"
            @click="step = 'method'"
            color="primary"
            class="q-ml-sm"
            flat
          />
        </q-stepper-navigation>
      </q-step>
      <q-step
        name="how"
        :title="$t(isPickup ? 'pickupStore' : 'deliveryAgency')"
        :icon="isPickup ? 'store' : 'local_shipping'">
        <q-select
          :label="$t(isPickup ? 'warehouse' : 'agency')"
          v-model="agency"
          :options="agencies"
          option-label="description"
          option-value="id"
        />
        <q-stepper-navigation>
          <q-btn
            label="Finish"
            to="./"
            color="primary"
          />
          <q-btn
            flat
            label="Back"
            @click="step = 'when'"
            color="primary"
            class="q-ml-sm"
          />
        </q-stepper-navigation>
      </q-step>
    </q-stepper>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-btn
        fab
        icon="shopping_basket"
        color="accent"
        :title="$t('rows')"
        to="./"
      />
    </q-page-sticky>
  </div>
</template>

<style lang="stylus" scoped>
  .border
    border-top $layout-border
  .method-desc
    margin-left 3.2em
    color $grey-8
</style>

<script>
import Page from 'components/Page'
import { date } from 'quasar'

export default {
  name: 'OrderConfigure',
  mixins: [Page],
  data () {
    return {
      step: 'method',
      method: 'delivery',
      address: null,
      addresses: null,
      date: date.formatDate(new Date(), 'YYYY/MM/DD'),
      agency: null,
      agencies: null,
      today: date.formatDate(new Date(), 'YYYY/MM/DD')
    }
  },
  computed: {
    isPickup () {
      return this.method === 'pickup'
    }
  },
  async mounted () {
    let res
    let filter
    let uid = this.$state.user.id

    filter = {
      fields: ['id', 'nickname', 'street'],
      where: { isActive: true }
    }
    res = await this.$axios.get(`Clients/${uid}/addresses`, { filter })
    this.addresses = res.data

    filter = {
      fields: ['id', 'defaultAddressFk'],
      include: {
        relation: 'defaultAddress',
        scope: filter
      }
    }
    res = await this.$axios.get(`Clients/${uid}`, { filter })
    this.address = res.data.defaultAddress

    res = await this.$axios.get(`AgencyModes`)
    this.agencies = res.data
  },
  methods: {
    datesFn (date) {
      return date >= this.today
    }
  },
  watch: {
    method () {
      this.step = 'when'
    },
    date () {
      this.step = 'how'
    }
  }
}
</script>
