import Image from "next/image"; import { Fragment, useCallback, useEffect, useRef, useState } from "react"; import Head from "next/head"; import { useRouter } from "next/router"; import axios from "axios"; import { MagnifyingGlassIcon, Bars3Icon, ShoppingCartIcon, ChevronRightIcon, Cog6ToothIcon, HeartIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline"; // Helpers import { useAuth } from "@/core/utils/auth"; // Components import Link from "../elements/Link"; // Images import Logo from "@/images/logo.png"; import greeting from "@/core/utils/greeting"; import apiOdoo from "@/core/utils/apiOdoo"; const menus = [ { name: 'Semua Brand', href: '/shop/brands' }, { name: 'Blog Indoteknik', href: '/' }, { name: 'Tentang Indoteknik', href: '/' }, { name: 'Pusat Bantuan', href: '/' }, ]; export default function Header({ title }) { const router = useRouter(); const { q = '' } = router.query; const [searchQuery, setSearchQuery] = useState(q != '*' ? q : ''); const [suggestions, setSuggestions] = useState([]); const searchQueryRef = useRef(); const [isMenuActive, setIsMenuActive] = useState(false); const [auth] = useAuth(); useEffect(() => { if (q) { searchQueryRef.current.blur(); setSuggestions([]); }; }, [q]); const clickSuggestion = (value) => { router.push(`/shop/search?q=${value}`, undefined, { scroll: false }); }; const getSuggestion = useCallback(async () => { if (searchQuery.trim().length > 0) { let result = await axios(`${process.env.SELF_HOST}/api/shop/suggest?q=${searchQuery.trim()}`); setSuggestions(result.data.suggest.mySuggester[searchQuery.trim()].suggestions); } else { setSuggestions([]); } }, [searchQuery]); useEffect(() => { if (document.activeElement == searchQueryRef.current) getSuggestion(); }, [getSuggestion]); const openMenu = () => setIsMenuActive(true); const closeMenu = () => setIsMenuActive(false); const searchSubmit = (e) => { e.preventDefault(); if (searchQuery.length > 0) { router.push(`/shop/search?q=${searchQuery}`, undefined, { scroll: false }); } else { searchQueryRef.current.focus(); } } const [ isOpenCategory, setOpenCategory ] = useState(false); const [ categories, setCategories ] = useState([]); useEffect(() => { const loadCategories = async () => { if (isOpenCategory && categories.length == 0) { let dataCategories = await apiOdoo('GET', '/api/v1/category/tree'); dataCategories = dataCategories.map((category) => { category.childs = category.childs.map((child1Category) => { return { ...child1Category, isOpen: false } }) return { ...category, isOpen: false } }); setCategories(dataCategories); } } loadCategories(); }, [ isOpenCategory, categories ]); const toggleCategories = (id = 0) => { let newCategories = categories.map((category) => { category.childs = category.childs.map((child1Category) => { return { ...child1Category, isOpen: id == child1Category.id ? !child1Category.isOpen : child1Category.isOpen } }) return { ...category, isOpen: id == category.id ? !category.isOpen : category.isOpen } }); setCategories(newCategories); } return ( <> {title}

{ auth && (

{ greeting() },

{auth.name}

) } { !auth && ( <> Masuk Daftar ) }

{ menus.map((menu, index) => ( { menu.name }

)) }

setOpenCategory(!isOpenCategory)}> Kategori

{ !isOpenCategory && } { isOpenCategory && }

{ isOpenCategory && categories.map((category) => (

{ category.name }

toggleCategories(category.id)}> { !category.isOpen && } { category.isOpen && }

{ category.isOpen && category.childs.map((child1Category) => (

{ child1Category.name } { child1Category.childs.length > 0 && (

toggleCategories(child1Category.id)}> { !child1Category.isOpen && } { child1Category.isOpen && }

) }

{ child1Category.isOpen && child1Category.childs.map((child2Category) => ( { child2Category.name } )) } )) } )) }

{suggestions.length > 1 && (

setSuggestions([])}>

)} ) }