import Vue from 'vue'
import './SntAddress.scss'
import { mapActions, mapGetters } from 'vuex'
import { VFadeTransition } from 'vuetify/lib'

export default Vue.extend({
  name: 'SntAddress',
  components: { VFadeTransition },
  data () {
    return {
      read: false
    }
  },
  computed: {
    ...mapGetters({
      customer: 'salePage/customer'
    }),
    customerId () {
      return this.customer?.id
    },
    breakpoint () {
      return this.$shipnity.breakpoint
    },
    hasAddress () {
      return !!this.customer.address
    },
    isAuth () {
      return !!this.customerId
    }
  },
  methods: {
    ...mapActions({
      setCustomer: 'salePage/setCustomer'
    })
  },
  template: `
    <div class="snt-address">
      <snt-container class="snt-address__container">
        <v-fade-transition>
          <div v-show="!hasAddress">
            <div class="snt-address__overlay">
              <p>
                เคยสั่งซื้อสินค้ากับเรา?
              </p>
              <div class="d-flex">
                <snt-dialog
                  :max-width="500"
                  :fullscreen="breakpoint.smAndDown"
                  scrollable>
                  <template #activator="{ on }">
                    <snt-button
                      class="snt-address__overlay-button"
                      color="primary"
                      large
                      outlined
                      v-on="on">
                      ยังไม่เคย
                    </snt-button>
                  </template>
                  <template #default="{ close }">
                    <snt-address-form @click:close="close()">
                      <template #header>
                        <span>
                          ที่อยู่จัดส่ง
                        </span>
                        <snt-spacer />
                        <snt-button icon="mdi-close" @click="close()" />
                      </template>
                    </snt-address-form>
                  </template>
                </snt-dialog>
                <snt-dialog
                  :width="400"
                  :attach="false"
                  :fullscreen="breakpoint.smAndDown"
                  scrollable>
                  <template #activator="{ on }">
                    <snt-button
                      class="snt-address__overlay-button"
                      color="primary"
                      large
                      outlined
                      v-on="on">
                      เคยสั่งซื้อแล้ว
                    </snt-button>
                  </template>
                  <template #default="{ on: { close } }">
                    <snt-login
                      @submit="(valid) => !valid || close()"
                      @click:close="close()">
                      <template #header>
                        <span>
                          เข้าสู่ระบบ
                        </span>
                        <snt-spacer />
                        <snt-button icon="mdi-close" @click="close()" />
                      </template>
                    </snt-login>
                  </template>
                </snt-dialog>
              </div>
            </div>
          </div>
        </v-fade-transition>
        <div :class="{'snt-address__card--opacity' : !hasAddress}">
          <div class="snt-address__card-title">
            <span class="subtitle-1"> ที่อยู่ในการจัดส่ง </span>
            <snt-spacer />
            <snt-dialog
              v-if="hasAddress"
              :max-width="500"
              :fullscreen="breakpoint.smAndDown"
              scrollable>
              <template #activator="{ on }">
                <snt-button
                  class="snt-address__button"
                  color="primary"
                  outlined
                  v-on="on">
                  {{ isAuth ? 'เพิ่มที่อยู่' : 'เปลี่ยน' }}
                </snt-button>
              </template>
              <template #default="{ on: { close } }">
                <snt-address-form @click:close="close()">
                  <template #header>
                    <span>
                      ที่อยู่จัดส่ง
                    </span>
                    <snt-spacer />
                    <snt-button icon="mdi-close" @click="close()" />
                  </template>
                </snt-address-form>
              </template>
            </snt-dialog>
            <snt-dialog
              v-if="isAuth"
              :attach="false"
              transition="slide-x-transition"
              fullscreen
              scrollable>
              <template #activator="{ on }">
                <snt-button
                  class="snt-address__button"
                  color="primary"
                  outlined
                  v-on="on">
                  เปลี่ยน
                </snt-button>
              </template>
              <template #default="{ on: { close } }">
                <address-list
                  @click:close="close()"
                  @select="close()" />
              </template>
            </snt-dialog>
          </div>
          <div
            v-if="hasAddress"
            class="snt-address__card-text">
            <div>
              {{ customer.name }} {{ customer.tel }}
            </div>
            <!-- eslint-disable-next-line vue/no-v-html -->
            <div>{{ customer.address }}</div>
            <div>{{ customer.email }}</div>
          </div>
        </div>
      </snt-container>
    </div>
  `
})
