<template>
  <div class="snt-address">
    <v-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 }">
                  <v-btn
                    class="snt-address__overlay-button"
                    color="primary"
                    large
                    outlined
                    v-on="on">
                    ยังไม่เคย
                  </v-btn>
                </template>
                <template #default="{ close }">
                  <snt-address-form @click:close="close()">
                    <template #header>
                      <span>
                        ที่อยู่จัดส่ง
                      </span>
                      <v-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 }">
                  <v-btn
                    class="snt-address__overlay-button"
                    color="primary"
                    large
                    outlined
                    v-on="on">
                    เคยสั่งซื้อแล้ว
                  </v-btn>
                </template>
                <template #default="{ on: { close } }">
                  <snt-login
                    @submit="(valid) => !valid || close()"
                    @click:close="close()">
                    <template #header>
                      <span>
                        เข้าสู่ระบบ
                      </span>
                      <v-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>
          <v-spacer />
          <snt-dialog
            v-if="hasAddress"
            :max-width="500"
            :fullscreen="breakpoint.smAndDown"
            scrollable>
            <template #activator="{ on }">
              <v-btn
                class="snt-address__button"
                color="primary"
                outlined
                v-on="on">
                {{ isAuth ? 'เพิ่มที่อยู่' : 'เปลี่ยน' }}
              </v-btn>
            </template>
            <template #default="{ on: { close } }">
              <snt-address-form @click:close="close()">
                <template #header>
                  <span>
                    ที่อยู่จัดส่ง
                  </span>
                  <v-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 }">
              <v-btn
                class="snt-address__button"
                color="primary"
                outlined
                v-on="on">
                เปลี่ยน
              </v-btn>
            </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>
    </v-container>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import SntDialog from './Dialog.vue'
import SntLogin from './Login.vue'
import SntButton from './Button.vue'
import SntAddressForm from './AddressForm.vue'
import AddressList from './AddressList.vue'

export default {
  name: 'SntAddress',
  components: {
    SntDialog,
    SntLogin,
    SntButton,
    SntAddressForm,
    AddressList
  },
  data () {
    return {
      read: false
    }
  },
  computed: {
    ...mapGetters({
      customer: 'salePage/customer'
    }),
    customerId () {
      return this.customer?.id
    },
    breakpoint () {
      return this.$vuetify.breakpoint
    },
    hasAddress () {
      return !!this.customer.address
    },
    isAuth () {
      return !!this.customerId
    }
  },
  methods: {
    ...mapActions({
      setCustomer: 'salePage/setCustomer'
    })
  }
}
</script>

<style scoped>
  .snt-address {
    background-color: #FFFFFF;
  }
  .snt-address__container {
    position: relative;
    min-height: 150px;
  }
  .snt-address__card-title {
    display: flex;
    margin-bottom: 16px;
    gap: 8px;
  }
  .snt-address__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
  }
  .snt-address__overlay-button {
    margin-left: 8px;
  }
  .snt-address__card--opacity {
    opacity: 0.5;
  }
</style>
