import { o as __toESM } from "../_runtime.mjs";
import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { S as ArrowLeft } from "../_libs/lucide-react.mjs";
import { a as p, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { i as useStoreWithProducts } from "./prominent-api-hooks-CNVDntUD.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { t as Route } from "./stores._storeId-Dh-du4bI.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/stores._storeId-CWdFRADX.js
var import_react = /* @__PURE__ */ __toESM(require_react());
var import_jsx_runtime = require_jsx_runtime();
function StoreDetailPage() {
	const { storeId } = Route.useParams();
	const navigate = useNavigate();
	const { data } = useStoreWithProducts(Number(storeId));
	const [selectedTag, setSelectedTag] = (0, import_react.useState)(null);
	const store = data?.store;
	const products = data?.products || [];
	const tags = (0, import_react.useMemo)(() => {
		const tagSet = /* @__PURE__ */ new Set();
		products.forEach((p) => {
			const tag = p.category || "All";
			tagSet.add(tag);
		});
		return ["All", ...Array.from(tagSet)];
	}, [products]);
	const filteredProducts = (0, import_react.useMemo)(() => {
		if (!selectedTag || selectedTag === "All") return products;
		return products.filter((p) => (p.category || "All") === selectedTag);
	}, [products, selectedTag]);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
			className: "mb-4 flex items-center gap-3",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTouchableOpacity, {
				onClick: () => navigate({ to: "/stores" }),
				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowLeft, { className: "h-5 w-5" })
			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
				weight: "bold",
				className: "text-xl",
				children: store?.name || "Store"
			})]
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "mb-4 flex gap-2 overflow-x-auto pb-2",
			children: tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
				onClick: () => setSelectedTag(tag === "All" ? null : tag),
				className: `whitespace-nowrap rounded-full px-4 py-1.5 text-sm ${tag === "All" && !selectedTag || selectedTag === tag ? "bg-brand-500 text-white" : "bg-gray-100 text-gray-600"}`,
				children: tag
			}, tag))
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "grid grid-cols-2 gap-3",
			children: filteredProducts.map((product) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
				onClick: () => navigate({
					to: "/stores/$storeId/product/$productId",
					params: {
						storeId,
						productId: String(product.id)
					}
				}),
				className: "rounded-xl border border-gray-100 bg-white p-3 shadow-sm",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "mb-2 aspect-square w-full overflow-hidden rounded-lg bg-gray-100",
						children: product.images?.[0] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
							src: product.images[0].uri,
							alt: product.name,
							className: "h-full w-full object-cover"
						})
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
						weight: "semibold",
						className: "text-sm",
						numberOfLines: 2,
						children: product.name
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
						weight: "bold",
						className: "mt-1 text-brand-600",
						children: ["₹", product.discountedPrice ?? product.price]
					})
				]
			}, product.id))
		})
	] });
}
//#endregion
export { StoreDetailPage as component };
