import Vue from 'vue'
import './SntAddressList.scss'
import { mapActions, mapGetters } from 'vuex'
import { VSpacer, VChip } from 'vuetify/lib'

export default Vue.extend({
  name: 'SntAddressList',
  components: { VSpacer, VChip },
  computed: {
    ...mapGetters({
      customer: 'salePage/customer'
    }),
    breakpoint () {
      return this.$shipnity.breakpoint
    },
    currentAddress () {
      return `${this.customer.address}`
    }
  },
  methods: {
    ...mapActions({
      setAddress: 'salePage/setAddress'
    }),
    isCurrentAddress (item) {
      const isEqualAddress = `${item.address} ${item.postcode}` === this.customer.address
      const isEqualEmail = item.email === this.customer.email
      const isEqualName = item.name === this.customer.name
      return isEqualAddress && isEqualEmail && isEqualName
    },
    select (selected) {
      this.setAddress({
        address: `${selected.address} ${selected.postcode}`,
        name: selected.name,
        postcode: selected.postcode,
        tel: selected.tel,
        email: selected.email
      })
      this.$emit('select')
    },
    changeNewDialog (dialog) {
      if (dialog) {
        this.goBack()
      }
    },
    goBack () {
      this.$emit('click:close')
    }
  },
  template: `
    <div class="snt-address-list">
      <div class="snt-address-list__header">
        <snt-button
          :ripple="false"
          class="snt-address-list__button-back v-btn--active"
          plain
          @click="goBack()">
          <snt-icon
            icon="mdi-chevron-left"
            small />
          กลับ
        </snt-button>
      </div>
      <snt-container class="snt-address-list__content">
        <div class="snt-address-list__title">
          <span> ที่อยู่ของคุณ </span>
          <v-spacer />
        </div>
        <div class="snt-address-list__lists">
          <template v-for="(list, i) in customer.addressList">
            <div
              :key="'customer-address-'+i"
              class="snt-address-list__card mb-5"
              outlined>
              <div class="snt-address-list__card-title">
                <div class="d-flex align-center">
                  <span class="mr-2"> ที่อยู่จัดส่ง </span>
                  <v-chip
                    v-if="isCurrentAddress(list)"
                    class="snt-address-list__chip"
                    color="success">
                    ใช้งานอยู่
                  </v-chip>
                </div>
                <v-spacer />
              </div>
              <div class="snt-address-list__card-text">
                <snt-row
                  class="mt-4"
                  no-gutters>
                  <snt-col cols="8">
                    <p>
                      {{ list.name }} {{ list.tel }}
                    </p>
                    <div>{{ list.address }} {{ list.postcode }}</div>
                    <div>{{ list.email }}</div>
                  </snt-col>
                  <snt-col>
                    <div class="text-right">
                      <snt-button
                        class="snt-address-list__button"
                        color="primary"
                        depressed
                        @click="select(list)">
                        ใช้งาน
                      </snt-button>
                    </div>
                  </snt-col>
                </snt-row>
              </div>
            </div>
          </template>
        </div>
      </snt-container>
    </div>
  `
})
