From 7e31f55fb7f5d563c2c616eacad8bfd85531468f Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 25 Oct 2025 17:57:18 +0330
Subject: [PATCH] menu category mobile

---
 src/components/CategoryModal.tsx | 297 ++++++++++++++-----------------
 1 file changed, 136 insertions(+), 161 deletions(-)

diff --git a/src/components/CategoryModal.tsx b/src/components/CategoryModal.tsx
index 81feaea..6e3d662 100644
--- a/src/components/CategoryModal.tsx
+++ b/src/components/CategoryModal.tsx
@@ -2,6 +2,9 @@
 import { FC, useState } from 'react'
 import { ArrowLeft2 } from 'iconsax-react'
 import { useRouter } from 'next/navigation'
+import Image from 'next/image'
+import { useGetCategories } from '@/share/hooks/useShareData'
+import { Category } from '@/share/types/SharedTypes'
 
 type Props = {
     isOpen: boolean
@@ -10,202 +13,174 @@ type Props = {
 
 const CategoryModal: FC<Props> = ({ isOpen, onClose }) => {
     const router = useRouter()
-    const [selectedMainCategory, setSelectedMainCategory] = useState<number>(0)
+    const { data, isLoading } = useGetCategories()
+    const [selectedMainCategory, setSelectedMainCategory] = useState<string | null>(null)
     const [expandedSubcategory, setExpandedSubcategory] = useState<string | null>(null)
 
-    // Main categories for the left column
-    const mainCategories = [
-        { icon: '🏪', title: 'سوپر مارکت ارگانیک' },
-        { icon: '🍞', title: 'خانه نان و شیرینی سالم' },
-        { icon: '🍎', title: 'بوفه رژیم‌های خاص' },
-        { icon: '💪', title: 'بوفه سبک زندگی' },
-        { icon: '🌿', title: 'عطاری سلامت' },
-        { icon: '🎁', title: 'بوفه هدایا و سوغات' }
-    ]
+    const parentCategories = data?.results?.data?.filter(cat => !cat.parent) || []
 
-    // Subcategories for each main category
-    const categorySubcategories = {
-        'سوپر مارکت ارگانیک': [
-            { title: 'ارگانیک گواهی‌دار', hasChildren: false },
-            { title: 'روغن های سالم', hasChildren: true },
-            { title: 'چاشنی سلامت', hasChildren: true },
-            { title: 'صبحانه سالم', hasChildren: false },
-            { title: 'نوشیدنی سالم', hasChildren: false },
-            { title: 'آرایشی', hasChildren: false },
-            { title: 'بهداشتی', hasChildren: false },
-            { title: 'تازه خوری', hasChildren: false },
-            { title: 'حبوبات و غلات', hasChildren: false },
-            { title: 'تنقلات', hasChildren: false },
-            { title: 'چای و دمنوش', hasChildren: false },
-            { title: 'قهوه', hasChildren: false },
-            { title: 'قند و شکر', hasChildren: false }
-        ],
-        'خانه نان و شیرینی سالم': [
-            { title: 'نان سنتی', hasChildren: false },
-            { title: 'نان صنعتی', hasChildren: false },
-            { title: 'شیرینی', hasChildren: false },
-            { title: 'کیک و کلوچه', hasChildren: false }
-        ],
-        'بوفه رژیم‌های خاص': [
-            { title: 'رژیم کتو', hasChildren: false },
-            { title: 'رژیم وگان', hasChildren: false },
-            { title: 'بدون گلوتن', hasChildren: false }
-        ],
-        'بوفه سبک زندگی': [
-            { title: 'ورزشی', hasChildren: false },
-            { title: 'لاغری', hasChildren: false },
-            { title: 'سالمندان', hasChildren: false }
-        ],
-        'عطاری سلامت': [
-            { title: 'گیاهان دارویی', hasChildren: false },
-            { title: 'عسل طبیعی', hasChildren: false },
-            { title: 'دمنوش', hasChildren: false }
-        ],
-        'بوفه هدایا و سوغات': [
-            { title: 'هدایا', hasChildren: false },
-            { title: 'سوغات', hasChildren: false },
-            { title: 'بسته بندی ویژه', hasChildren: false }
-        ]
-    }
-
-    // Third level subcategories (for items that expand)
-    const thirdLevelCategories = {
-        'روغن های سالم': [
-            { icon: '🫒', title: 'روغن زیتون پیوست و مو' },
-            { icon: '🌻', title: 'روغن ماساژ' },
-            { icon: '🥥', title: 'روغن های خوراکی' }
-        ],
-        'چاشنی سلامت': [
-            { icon: '🥒', title: 'ترشی' },
-            { icon: '🥫', title: 'رب ها' },
-            { icon: '🍯', title: 'سس ها' },
-            { icon: '🥬', title: 'سبزیجات خشک' },
-            { icon: '🌶️', title: 'ادویه' },
-            { icon: '🍎', title: 'سرکه' },
-            { icon: '🫒', title: 'زیتون' }
-        ]
-    }
-
-    const handleMainCategoryClick = (index: number) => {
-        setSelectedMainCategory(index)
+    const handleMainCategoryClick = (categoryId: string) => {
+        setSelectedMainCategory(categoryId)
         setExpandedSubcategory(null)
     }
 
-    const handleSubcategoryClick = (subcategory: { title: string; hasChildren: boolean }) => {
-        if (subcategory.hasChildren && thirdLevelCategories[subcategory.title as keyof typeof thirdLevelCategories]) {
-            setExpandedSubcategory(expandedSubcategory === subcategory.title ? null : subcategory.title)
+    const handleSubcategoryClick = (category: Category) => {
+        if (category.children && category.children.length > 0) {
+            setExpandedSubcategory(expandedSubcategory === category._id ? null : category._id)
         } else {
-            router.push(`/products/${subcategory.title}`)
+            router.push(`/products/${category.title_en}`)
             onClose()
         }
     }
 
+    const handleCategoryNavigate = (category: Category) => {
+        router.push(`/products/${category.title_en}`)
+        onClose()
+    }
+
     if (!isOpen) return null
 
-    const currentMainCategory = mainCategories[selectedMainCategory]
-    const currentSubcategories = categorySubcategories[currentMainCategory.title as keyof typeof categorySubcategories] || []
+    const currentMainCategoryData = selectedMainCategory
+        ? parentCategories.find(cat => cat._id === selectedMainCategory)
+        : parentCategories[0]
+
+    const currentSubcategories = currentMainCategoryData?.children || []
 
     return (
         <div className="fixed top-[120px] left-0 right-0 bottom-0 bg-white z-40 md:hidden">
             <div className="flex h-full overflow-hidden">
                 {/* Left Column - Main Categories */}
                 <div className="w-28 bg-gray-100 overflow-y-auto">
-                    <div className="p-2 space-y-2">
-                        {mainCategories.map((category, index) => (
-                            <div key={index}>
-                                <div
-                                    className={`flex flex-col items-center text-center p-2 cursor-pointer rounded-lg transition-colors ${index === selectedMainCategory ? 'bg-white shadow-sm' : 'hover:bg-gray-200'
-                                        }`}
-                                    onClick={() => handleMainCategoryClick(index)}
-                                >
-                                    <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center mb-1 shadow-sm">
-                                        <span className="text-lg">{category.icon}</span>
+                    {isLoading ? (
+                        <div className="flex items-center justify-center h-40">
+                            <div className="text-gray-500 text-xs">در حال بارگذاری...</div>
+                        </div>
+                    ) : (
+                        <div className="p-2 space-y-2">
+                            {parentCategories.map((category, index) => (
+                                <div key={category._id}>
+                                    <div
+                                        className={`flex flex-col items-center text-center p-2 cursor-pointer rounded-lg transition-colors ${(selectedMainCategory || parentCategories[0]?._id) === category._id
+                                            ? 'bg-white shadow-sm'
+                                            : 'hover:bg-gray-200'
+                                            }`}
+                                        onClick={() => handleMainCategoryClick(category._id)}
+                                    >
+                                        <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center mb-1 shadow-sm">
+                                            {category.icon ? (
+                                                <Image
+                                                    src={category.icon}
+                                                    alt={category.title_fa}
+                                                    width={24}
+                                                    height={24}
+                                                    className="w-6 h-6 object-contain"
+                                                />
+                                            ) : (
+                                                <span className="text-lg">📦</span>
+                                            )}
+                                        </div>
+                                        <span className="text-xs text-gray-800 leading-tight text-center">
+                                            {category.title_fa}
+                                        </span>
                                     </div>
-                                    <span className="text-xs text-gray-800 leading-tight text-center">
-                                        {category.title}
-                                    </span>
+                                    {index < parentCategories.length - 1 && (
+                                        <div className="border-b border-gray-200 mx-1" />
+                                    )}
                                 </div>
-                                {index < mainCategories.length - 1 && (
-                                    <div className="border-b border-gray-200 mx-1" />
-                                )}
-                            </div>
-                        ))}
-                    </div>
+                            ))}
+                        </div>
+                    )}
                 </div>
 
                 {/* Right Column - Subcategories */}
                 <div className="flex-1 bg-white overflow-y-auto">
                     <div className="px-4 py-4">
-                        {/* Special Categories */}
-                        <div className="space-y-1 mb-4">
-                            <div
-                                className="py-3 cursor-pointer hover:bg-gray-50 transition-colors"
-                                onClick={() => {
-                                    router.push('/products')
-                                    onClose()
-                                }}
-                            >
-                                <span className="text-primary font-medium text-sm">همه محصولات سوپر مارکت ارگانیک</span>
+                        {isLoading ? (
+                            <div className="flex items-center justify-center h-40">
+                                <div className="text-gray-500">در حال بارگذاری...</div>
                             </div>
-                            <div
-                                className="py-3 cursor-pointer hover:bg-gray-50 transition-colors"
-                                onClick={() => {
-                                    router.push('/products/organic')
-                                    onClose()
-                                }}
-                            >
-                                <span className="text-gray-800 font-medium text-sm">ارگانیک گواهی‌دار</span>
-                            </div>
-                        </div>
-
-                        {/* Subcategories List */}
-                        <div>
-                            {currentSubcategories.map((subcategory, index) => (
-                                <div key={index}>
-                                    <div
-                                        className="flex items-center justify-between py-3 cursor-pointer hover:bg-gray-50 transition-colors"
-                                        onClick={() => handleSubcategoryClick(subcategory)}
-                                    >
-                                        <span className="text-gray-800 text-sm">{subcategory.title}</span>
-                                        {subcategory.hasChildren && (
-                                            <ArrowLeft2 size={16} color="#666" />
-                                        )}
+                        ) : (
+                            <>
+                                {/* Main Category Link */}
+                                {currentMainCategoryData && (
+                                    <div className="space-y-1 mb-4">
+                                        <div
+                                            className="py-3 cursor-pointer hover:bg-gray-50 transition-colors"
+                                            onClick={() => handleCategoryNavigate(currentMainCategoryData)}
+                                        >
+                                            <span className="text-primary font-medium text-sm">
+                                                همه محصولات {currentMainCategoryData.title_fa}
+                                            </span>
+                                        </div>
                                     </div>
+                                )}
 
-                                    {/* Expanded third level categories */}
-                                    {expandedSubcategory === subcategory.title && thirdLevelCategories[subcategory.title as keyof typeof thirdLevelCategories] && (
-                                        <div className="mt-2 mb-4 p-4 bg-gray-50 rounded-lg">
-                                            <div className="text-sm text-primary mb-3 font-medium">
-                                                همه محصولات {subcategory.title}
-                                            </div>
-                                            <div className="grid grid-cols-2 gap-4">
-                                                {thirdLevelCategories[subcategory.title as keyof typeof thirdLevelCategories].map((item, itemIndex) => (
-                                                    <div
-                                                        key={itemIndex}
-                                                        className="flex flex-col items-center p-4 bg-white rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
-                                                        onClick={() => {
-                                                            router.push(`/products/${item.title}`)
-                                                            onClose()
-                                                        }}
-                                                    >
-                                                        <div className="w-14 h-14 bg-white rounded-full flex items-center justify-center mb-3 border border-gray-200">
-                                                            <span className="text-xl">{item.icon}</span>
+                                {/* Subcategories List */}
+                                <div>
+                                    {currentSubcategories.length > 0 ? (
+                                        currentSubcategories.map((subcategory, index) => (
+                                            <div key={subcategory._id}>
+                                                <div
+                                                    className="flex items-center justify-between py-3 cursor-pointer hover:bg-gray-50 transition-colors"
+                                                    onClick={() => handleSubcategoryClick(subcategory)}
+                                                >
+                                                    <span className="text-gray-800 text-sm">{subcategory.title_fa}</span>
+                                                    {subcategory.children && subcategory.children.length > 0 && (
+                                                        <ArrowLeft2 size={16} color="#666" />
+                                                    )}
+                                                </div>
+
+                                                {/* Expanded third level categories */}
+                                                {expandedSubcategory === subcategory._id && subcategory.children && subcategory.children.length > 0 && (
+                                                    <div className="mt-2 mb-4 p-4 bg-gray-50 rounded-lg">
+                                                        <div
+                                                            className="text-sm text-primary mb-3 font-medium cursor-pointer"
+                                                            onClick={() => handleCategoryNavigate(subcategory)}
+                                                        >
+                                                            همه محصولات {subcategory.title_fa}
+                                                        </div>
+                                                        <div className="grid grid-cols-2 gap-4">
+                                                            {subcategory.children.map((item) => (
+                                                                <div
+                                                                    key={item._id}
+                                                                    className="flex flex-col items-center p-4 bg-white rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
+                                                                    onClick={() => handleCategoryNavigate(item)}
+                                                                >
+                                                                    <div className="w-14 h-14 bg-white rounded-full flex items-center justify-center mb-3 border border-gray-200">
+                                                                        {item.icon ? (
+                                                                            <Image
+                                                                                src={item.icon}
+                                                                                alt={item.title_fa}
+                                                                                width={28}
+                                                                                height={28}
+                                                                                className="w-7 h-7 object-contain"
+                                                                            />
+                                                                        ) : (
+                                                                            <span className="text-xl">📦</span>
+                                                                        )}
+                                                                    </div>
+                                                                    <span className="text-sm text-gray-800 text-center leading-tight font-medium">
+                                                                        {item.title_fa}
+                                                                    </span>
+                                                                </div>
+                                                            ))}
                                                         </div>
-                                                        <span className="text-sm text-gray-800 text-center leading-tight font-medium">
-                                                            {item.title}
-                                                        </span>
                                                     </div>
-                                                ))}
+                                                )}
+
+                                                {index < currentSubcategories.length - 1 && (
+                                                    <div className="border-b border-gray-100" />
+                                                )}
                                             </div>
+                                        ))
+                                    ) : (
+                                        <div className="text-center text-gray-500 py-8">
+                                            زیردسته‌ای یافت نشد
                                         </div>
                                     )}
-
-                                    {index < currentSubcategories.length - 1 && (
-                                        <div className="border-b border-gray-100" />
-                                    )}
                                 </div>
-                            ))}
-                        </div>
+                            </>
+                        )}
                     </div>
                 </div>
             </div>