<template>
  <div
    class="pr-4 tw-h-[48px] tw-leading-[48px] border-b tw-flex tw-justify-between tw-items-center"
  >
    <span class="ml-4 tw-font-bold">{{ categoryStore.selectedCategory }}</span>
    <span class="ml-1 text-grey-darken-4 text-body-2" @click="drawerVis = !drawerVis"
      >Filter <v-icon> mdi-filter-outline </v-icon></span
    >
  </div>
  <!-- <div class="bg-grey-lighten-4 tw-w-full tw-h-3"></div> -->
  <v-layout>
    <v-navigation-drawer
      @update:model-value="handleDrawerHide"
      v-model="drawerVis"
      location="bottom"
      touchless
      class="!tw-h-[70%] bg-grey-lighten-4 tw-overflow-y-auto tw-overflow-x-hidden"
    >
      <div class="mb-4 pa-2 tw-bg-[#fff]" v-for="(item, index) in categoryStore.list" :key="index">
        <div class="mb-4 tw-flex tw-items-center">
          <div>
            <v-img
              class="mr-4 tw-float-left"
              width="32"
              :src="
                categoryStore.selectedCategory === item.categoryDisplayName
                  ? CATEGORY_IMG[index].selected
                  : CATEGORY_IMG[index].normal
              "
            ></v-img>
          </div>
          <strong class="tw-m-0 tw-inline">{{ item.categoryDisplayName }}</strong>
        </div>
        <div class="tw-flex tw-flex-wrap tw-justify-between">
          <template v-if="index !== 0">
            <div
              cols="6"
              v-for="(k, i) in item.list"
              :class="
                'tw-w-[48%] mb-4 py-3 px-2 tw-rounded-lg tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis' +
                (categoryStore.selectedSubCategory === k.id
                  ? ' bg-blue-darken-1 text-white '
                  : ' bg-grey-lighten-4 ')
              "
              :key="i"
              @click="handleCategoryClick(item, k.id)"
            >
              {{ k.name }}
            </div>
          </template>
          <template v-else>
            <div
              cols="6"
              v-for="(k, i) in item.productFunctions"
              :class="
                (categoryStore.selectedFuncCategory === k.id
                  ? ' bg-blue-darken-1 text-white '
                  : ' bg-grey-lighten-4 ') +
                ' tw-w-[48%] mb-4 py-3 px-2 tw-rounded-lg tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis'
              "
              :key="i"
              @click="handleCategoryClick(item, k.id)"
            >
              {{ k.name }}
            </div>
          </template>
        </div>
      </div>
    </v-navigation-drawer>
  </v-layout>
</template>

<script setup lang="ts">
import { useCategoryStore } from '@/stores/category'
import { useProductListStore } from '@/stores/product_list'
import type { CategoryRootType } from '@/type'
import { computed, ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const categoryStore = useCategoryStore()
const productStore = useProductListStore()

const drawerVis = ref(false)

const CATEGORY_IMG = [
  { normal: '/category/1.png', selected: '/category/1.1.png', name: 'Energy materials' },
  { normal: '/category/2.png', selected: '/category/2.1.png', name: 'Laboratory consumables' },
  { normal: '/category/3.png', selected: '/category/3.1.png', name: 'Low-dimensional materials' },
  { normal: '/category/4.png', selected: '/category/4.1.png', name: 'Equipment' }
]

const SEO = {
  'Energy materials':
    'Energy materials,Not specified,Battery accessories,Lithium-ion batteries,Capacitors,Sodium-ion batteries,Lithium-sulfur batteries,Potassium/magnesium/aluminum/zinc batteries,Air/fuel/solar,Analytical electrodes,Complete battery accessories',
  'Laboratory consumables':
    'Laboratory consumables,Not specified,Glass materials,Plastic materials,Metal materials,Ceramic materials,Paper film materials,Chemical materials,Tetrafluoro materials,Safety protection,Office supplies,Tools,Others',
  'Low-dimensional materials':
    ',Low-dimensional materialsNot specified,Zero-dimensional carbon materials,One-dimensional carbon materials,Two-dimensional carbon materials,Three-dimensional carbon materials,Inorganic nanomaterials,Organic nanomaterials,Metal nanomaterials,Others',
  Equipment:
    'Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment'
}

const handleDrawerHide = () => {
  productStore.updatePageNo(1)

  router.push({ query: { category: categoryStore.selectedCategory } })

  const doc = document as any
  const head = doc.getElementsByTagName('head')
  const meta = doc.createElement('meta')
  document.title = SEO[categoryStore.selectedCategory as keyof typeof SEO]
  doc
    .querySelector('meta[name="keywords"]')
    .setAttribute('content', SEO[categoryStore.selectedCategory as keyof typeof SEO])
  head[0].appendChild(meta)
}

const handleCategoryClick = (item: CategoryRootType, id: string) => {
  categoryStore.updateCategory(item.categoryDisplayName)

  if (item.categoryDisplayName === 'Energy materials') {
    categoryStore.updateFuncCategory(id)
    categoryStore.updateSubCategory(item.list[0].id)
  } else {
    categoryStore.updateSubCategory(id)
  }
}
</script>

<style lang="less" scoped></style>