<template>
  <header>
    <div :class="`tp-header-area tp-header-style-${style_2 ? 'primary' : 'darkRed'} tp-header-height`">
      <!-- header bottom start -->
      <div id="header-sticky" :class="`tp-header-bottom-2 tp-header-sticky ${isSticky ? 'header-sticky' : ''}`">
        <div class="container">
          <div class="tp-mega-menu-wrapper p-relative">
            <div class="row align-items-center">
              <div class="col-xl-2 col-lg-5 col-md-5 col-sm-4 col-6">
                <div class="logo">
                  <nuxt-link href="/">
                    <img src="/img/logo/logo-vectorgeenk.webp" alt="Logo de VECTORGEENK, tienda de vectores en línea"
                      title="Logo de VECTORGEENK - Tienda de vectores">
                  </nuxt-link>
                </div>
              </div>
              <div class="col-xl-5 d-none d-xl-block">
                <div class="main-menu menu-style-2">
                  <nav class="tp-main-menu-content">
                    <!-- menus start -->
                    <header-component-menus />
                    <!-- menus end -->
                  </nav>
                </div>
              </div>
              <div class="col-xl-5 col-lg-7 col-md-7 col-sm-8 col-6">
                <div class="tp-header-bottom-right d-flex align-items-center justify-content-end pl-30">
                  <div class="tp-header-search-2 d-none d-sm-block">
                    <form @submit.prevent="handleSubmit">
                      <input type="text" placeholder="Buscar producto..." v-model="productsStore.filters.search">
                      <button type="submit">
                        <svg-search />
                      </button>
                    </form>
                  </div>
                  <div class="tp-header-action d-flex align-items-center ml-30">
                    <div class="tp-header-action-item d-none d-lg-block">
                      <nuxt-link :href="loginStore.user ? '/profile' : '/login'" class="d-flex align-items-center">
                        <div class="tp-header-login-icon">
                          <span>
                            <SvgUser />
                          </span>
                        </div>
                      </nuxt-link>
                    </div>
                    <!-- <div class="tp-header-action-item d-none d-lg-block" v-if="loginStore.user"> -->
                      <!-- <nuxt-link href="/wishlist" class="tp-header-action-btn">
                        <svg-wishlist />
                        <span class="tp-header-action-badge">{{ wishlistStore.wishlists.length }}</span>
                      </nuxt-link> -->
                    <!-- </div> -->
                    <div class="tp-header-action-item" v-if="loginStore.user">
                      <button @click="cartStore.handleCartOffcanvas" type="button"
                        class="tp-header-action-btn cartmini-open-btn">
                        <svg-cart-bag />
                        <span class="tp-header-action-badge">{{ loginStore.user ? loginStore.user.products_in_cart : '0'
                          }}</span>
                      </button>
                    </div>
                    <div class="tp-header-action-item tp-header-hamburger mr-20 d-xl-none">
                      <button @click="utilsStore.handleOpenMobileMenu()" type="button" class="tp-offcanvas-open-btn">
                        <svg-menu-icon />
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- cart offcanvas start -->
  <offcanvas-cart-sidebar />
  <!-- cart offcanvas end -->

  <!-- cart offcanvas start -->
  <offcanvas-mobile-sidebar product-type="fashion" />
  <!-- cart offcanvas end -->
</template>

<script setup lang="ts">
const router = useRouter();
const { isSticky } = useSticky();
import { useWishlistStore } from '@/pinia/useWishlistStore';
import { useUtilityStore } from '@/pinia/useUtilityStore';
import { useProductsStore } from '@/pinia/products/products.store';
import { useCartStore } from '@/pinia/cart/cart.store';
import { useLoginStore } from '@/pinia/auth/login/login.store';

const productsStore = useProductsStore();
const loginStore = useLoginStore();

const cartStore = useCartStore();
const wishlistStore = useWishlistStore();
const utilsStore = useUtilityStore();

defineProps<{ style_2?: boolean }>()

// handleSubmit
const handleSubmit = () => {
  if (!productsStore.filters.search) {
    return
  } else {
    router.push(`/search?search=${productsStore.filters.search}`)
  }
}
</script>
