RestaurantDash/src/components/Home/Supplier/Supplier.js

import React, { useState, useEffect } from "react";
import { Box, useTheme, useMediaQuery } from "@mui/material";
import KitchPlusAppBar from "../AppBar";
import Sidebar from "../SideHome";


import AccountSettings from "./contect/AccountSettings";
import AllProducts from "./contect/AllProducts";
import PopularProductSection from "./contect/PopularProductSection";
import ProductDetail from "./contect/ProductDetail";

import api from "../../../services/authService";

const IMAGE_URL = "http://127.0.0.1:8000/storage/";
const drawerWidth = 230;

const Supplier = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);

  const [categories, setCategories] = useState([]);
  const [products, setProducts] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [selectedCategoryName, setSelectedCategoryName] = useState(null);

  const [selectedProduct, setSelectedProduct] = useState(null);

  const [showAllPopular, setShowAllPopular] = useState(false);
  const [showAllTopItems, setShowAllTopItems] = useState(false);

  useEffect(() => {
    setSidebarOpen(window.innerWidth >= theme.breakpoints.values.md);
  }, [theme.breakpoints.values.md]);

  useEffect(() => {
    const handleResize = () => {
      setSidebarOpen(window.innerWidth >= theme.breakpoints.values.md);
    };
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [theme.breakpoints.values.md]);

  useEffect(() => {
    const fetchCategories = async () => {
      try {
        const res = await api.getAllCategory();
        if (res.success) {
          const formatted = res.data.map((category) => ({
            id: category.id,
            name: category.name,
            icon: category.image
              ? IMAGE_URL + category.image
              : "/images/default-product.png",
          }));
          setCategories(formatted);
        }
      } catch (err) {
        console.error("❌ Error fetching categories:", err);
      }
    };

    fetchCategories();
  }, []);

  useEffect(() => {
    const fetchProducts = async () => {
      if (!selectedCategory) return;

      try {
        const res = await api.getProductsByCategory(selectedCategory, 1);
        if (res.success) {
          const formatted = res.data.map((product) => ({
            id: product.id,
            name: product.name,
            category: product.supplier_category_id,
            price: product.price,
            unit: "Kg",
            image: product.image
              ? IMAGE_URL + product.image
              : "/images/default-product.png",
          }));
          setProducts(formatted);

          const categoryName = categories.find(
            (cat) => cat.id === selectedCategory
          )?.name;
          setSelectedCategoryName(categoryName || "");
        }
      } catch (err) {
        console.error("Error fetching products:", err);
      }
    };

    fetchProducts();
  }, [selectedCategory, categories]);

  const handleDrawerToggle = () => {
    setSidebarOpen(!sidebarOpen);
  };

  const toggleShowAllPopular = () => {
    setShowAllPopular((prev) => !prev);
  };

  const toggleShowAllTopItems = () => {
    setShowAllTopItems((prev) => !prev);
  };

  return (
    <Box
      sx={{
        display: "flex",
        height: "100vh",
        backgroundColor: "#F6F6F6",
        overflow: "hidden",
      }}
    >
      <Sidebar
        open={sidebarOpen}
        onClose={handleDrawerToggle}
        isMobile={isMobile}
        drawerWidth={drawerWidth}
      />

      <Box
        sx={{
          flexGrow: 1,
          display: "flex",
          flexDirection: "column",
          width: "10%",
          marginLeft: { xs: 0, sm: sidebarOpen ? `${drawerWidth}px` : 0, md: 0 },
          transition: theme.transitions.create(["width"], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
          }),
        }}
      >
        <KitchPlusAppBar
          onDrawerToggle={handleDrawerToggle}
          sidebarOpen={sidebarOpen}
          isMobile={isMobile}
        />

        <Box
          sx={{
            flexGrow: 1,
            width: sidebarOpen ? "calc(100% - 40px)" : "100%",
            pt: { xs: 2, sm: 3 },
            overflowY: "auto",
            pl: { xs: 1, sm: 2 },
            pr: { xs: 1, sm: 2 },
            scrollbarWidth: "none",
            "&::-webkit-scrollbar": { display: "none" },
          }}
        >
          {selectedProduct ? (
            <ProductDetail
              product={selectedProduct}
              onBack={() => setSelectedProduct(null)}
            />
          ) : (
            <>
              <AccountSettings
                selectedCategory={selectedCategory}
                setSelectedCategory={setSelectedCategory}
                categories={categories}
              />

              {selectedCategory ? (
                <Box sx={{ mt: 3 }}>
                  <AllProducts
                    products={products}
                    showAll={true}
                    onToggleShowAll={() => setSelectedCategory(null)}
                    onProductClick={setSelectedProduct}
                    categoryName={selectedCategoryName}
                  />
                </Box>
              ) : !showAllPopular && !showAllTopItems ? (
                <Box
                  sx={{
                    mt: 3,
                    display: "flex",
                    flexDirection: { xs: "column", md: "row" },
                    alignItems: "stretch",
                    gap: 2,
                  }}
                >
                  <Box
                    sx={{
                      flexBasis: { xs: "100%", md: "100%" },
                      display: "flex",
                      flexDirection: "column",
                      pb: { xs: 4, md: 4 },
                      pr: { xs: 1, md: 0 },
                      mb: 10,
                    }}
                  >
                    <PopularProductSection
                      products={products}
                      showAll={showAllPopular}
                      onToggleShowAll={toggleShowAllPopular}
                      onProductClick={setSelectedProduct}
                    />
                  </Box>
                </Box>
              ) : showAllPopular ? (
                <Box sx={{ mt: 3, width: "100%" }}>
                  <PopularProductSection
                    products={products}
                    showAll={showAllPopular}
                    onToggleShowAll={toggleShowAllPopular}
                    onProductClick={setSelectedProduct}
                  />
                </Box>
              ) : showAllTopItems ? (
                <Box sx={{ mt: 3, width: "100%" }}>
                </Box>
              ) : null}
            </>
          )}
        </Box>
      </Box>
    </Box>
  );
};

export default Supplier;