import Vue from 'vue'
import './SntNavbar.scss'
import {
  VAppBar,
  VNavigationDrawer,
  VAppBarNavIcon,
  VMenu,
  VDivider,
  VSpacer,
  VList,
  VListItem,
  VListItemTitle,
  VListItemContent
} from 'vuetify/lib'
import { mapActions, mapGetters } from 'vuex'

export default Vue.extend({
  name: 'SntNavbar',
  components: {
    VAppBar,
    VNavigationDrawer,
    VAppBarNavIcon,
    VMenu,
    VDivider,
    VSpacer,
    VList,
    VListItem,
    VListItemTitle,
    VListItemContent
  },
  props: {
    src: {
      type: String,
      default: undefined
    },
    menuHome: {
      type: Object,
      default: () => ({
        label: 'Home'
      })
    },
    menuProducts: {
      type: Object,
      default: () => ({
        label: 'Products'
      })
    },
    items: {
      type: Array,
      default: () => ([])
    },
    align: {
      type: String,
      validator: (v) => ['left', 'center', 'right'].includes(v),
      default: 'left'
    },
    fixed: {
      type: Boolean,
      default: false
    },
    elevation: {
      type: [Number, String],
      default: 3
    }
  },
  data () {
    return {
      drawer: false,
      username: 'Guest',
      showUser: false
    }
  },
  computed: {
    ...mapGetters({
      purchasesQuantity: 'cart/purchasesQuantity',
      customer: 'salePage/customer',
      subdomain: 'salePage/subdomain'
    }),
    isDemo () {
      return !this.subdomain
    },
    customerId () {
      return this.customer?.id
    },
    isAuth () {
      return !!this.customerId
    },
    customerName () {
      return this.customer?.name
    },
    orderLogo () {
      if (this.$shipnity.breakpoint.mobile || this.align === 'left') {
        return 1
      }
      return this.align === 'center' ? 2 : 3
    },
    orderLink () {
      return this.align === 'center' ? 1 : 2
    },
    orderUser () {
      return this.align === 'right' ? 1 : 3
    },
    links () {
      return this.items.map((item, i) => this.$_.defaults(
        this.$_.cloneDeep(item),
        {
          sequence: i + 1,
          label: '',
          href: '',
          target: '_blank',
          visible: true
        }
      )).filter((item) => item.visible)
    },
    slotProps () {
      return {
        logo: this.src,
        menuHome: this.menuHome,
        menuProducts: this.menuProducts,
        extendLinks: this.links,
        logout: this.logout,
        props: {
          align: this.align
        }
      }
    }
  },
  methods: {
    ...mapActions({
      setAddress: 'salePage/setAddress',
      clearCart: 'cart/clearCart'
    }),
    setDrawer (drawer = false) {
      this.drawer = drawer
    },
    logout () {
      if (this.isDemo) {
        return
      }
      this.$auth.logout()
      this.setAddress({
        id: null,
        addressList: [],
        address: '',
        name: '',
        tel: '',
        taxId: '',
        email: ''
      })
      this.clearCart()
      this.$router.push({ name: 'SalePage' })
    }
  },
  template: `
    <div class="snt-navbar">
      <slot v-bind="slotProps">
        <v-app-bar
          :height="64"
          :fixed="fixed"
          :elevation="elevation"
          color="transparent">
          <snt-container
            class="snt-navbar__container"
            fluid>
            <snt-row>
              <snt-col
                :cols="$shipnity.breakpoint.mobile ? 6 : 4"
                :order="orderLogo"
                class="snt-navbar__col">
                <snt-button
                  v-if="$shipnity.breakpoint.mobile"
                  icon="mdi-menu"
                  @click="setDrawer(true)" />
                <snt-link
                  v-if="src"
                  :to="{ name: 'SalePage' }"
                  class="snt-navbar__logo">
                  <template #activator>
                    <img
                      :src="src"
                      height="100%"
                      width="100%" />
                  </template>
                </snt-link>
              </snt-col>
              <snt-col
                v-if="!$shipnity.breakpoint.mobile"
                :cols="4"
                :order="orderLink"
                class="snt-navbar__col">
                <div
                  class="snt-navbar__links">
                  <snt-button
                    :to="{ name: 'SalePage' }"
                    text>
                    {{ menuHome.label }}
                  </snt-button>
                  <snt-button
                    :to="{ name: 'SalePageProducts' }"
                    text>
                    {{ menuProducts.label }}
                  </snt-button>
                  <template v-for="(item, i) in links">
                    <snt-button
                      :key="'menu-'+i"
                      :href="item.href"
                      :target="item.target"
                      text>
                      {{ item.label }}
                    </snt-button>
                  </template>
                </div>
              </snt-col>
              <snt-col
                :cols="$shipnity.breakpoint.mobile ? 6 : 4"
                :order="orderUser"
                class="snt-navbar__col">
                <div class="snt-navbar__user">
                  <snt-button
                    :to="{ name: 'SalePageOrders' }"
                    icon="mdi-update"
                    small />
                  <v-menu
                    v-if="isAuth"
                    v-model="showUser"
                    :close-on-content-click="false"
                    max-width="320"
                    min-width="180"
                    bottom
                    left
                    offset-y>
                    <template #activator="{ on }">
                      <snt-button
                        icon="mdi-account-outline"
                        small
                        v-on="on" />
                    </template>
                    <div class="snt-navbar-user">
                      <div class="snt-navbar-user__title">
                        บัญชีผู้ใช้
                      </div>
                      <v-divider class="snt-navbar-user__divider" />
                      <div class="snt-navbar-user__name">
                        {{ customerName }}
                      </div>
                      <v-divider class="snt-navbar-user__divider" />
                      <div class="snt-navbar-user__action">
                        <snt-button
                          color="secondary"
                          depressed
                          small
                          @click="logout()">
                          ออกจากระบบ
                        </snt-button>
                      </div>
                    </div>
                  </v-menu>
                  <snt-dialog
                    v-else
                    :max-width="400">
                    <template #activator="{ on }">
                      <snt-button
                        icon="mdi-account-outline"
                        small
                        v-on="on" />
                    </template>
                    <template #default="{ on: { close } }">
                      <snt-login
                        @submit="(valid) => !valid || close()"
                        @click:close="close()">
                        <template #header>
                          <span>
                            เข้าสู่ระบบ
                          </span>
                          <v-spacer />
                          <snt-icon @click="close()">
                            mdi-close
                          </snt-icon>
                        </template>
                      </snt-login>
                    </template>
                  </snt-dialog>
                  <snt-button
                    v-slot="{ attrs }"
                    :to="{ name: 'SalePageCart' }"
                    icon="mdi-cart-outline"
                    small>
                    <snt-icon :small="attrs.small">
                      {{ attrs.icon }}
                    </snt-icon>
                    <div
                      v-if="purchasesQuantity"
                      class="snt-navbar__purchases-number">
                      <div class="snt-navbar__badge">
                        {{ purchasesQuantity }}
                      </div>
                    </div>
                  </snt-button>
                </div>
              </snt-col>
            </snt-row>
          </snt-container>
        </v-app-bar>
        <v-navigation-drawer
          v-if="$shipnity.breakpoint.mobile"
          v-model="drawer"
          fixed
          app>
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title class="title">
                เมนู
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-divider />
          <v-list
            dense
            nav>
            <v-list-item
              :to="{ name: 'SalePage' }"
              exact
              link>
              <v-list-item-content>
                <v-list-item-title>{{ menuHome.label }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item
              :to="{ name: 'SalePageProducts' }"
              exact
              link>
              <v-list-item-content>
                <v-list-item-title>{{ menuProducts.label }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item
              v-for="(item, i) in links"
              :key="'menu-'+i"
              :href="item.href"
              :target="item.target"
              link>
              <v-list-item-content>
                <v-list-item-title>{{ item.label }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-navigation-drawer>
      </slot>
    </div>
  `
})
