import { useServiceGetUserBookmarks } from "../requestHandler/use-bookmark-hooks";
import ProfilePagesHeader from "../components/ProfilePagesHeader";
import bookmark from "../assets/icons/profile/bookmark/bookmark.svg";
import MondrianProductList from "~/components/MondrianProductList";
import { MetaFunction } from "@remix-run/node";

export default function Bookmarks() {
  const {
    data,
    isLoading,
    isError,
    refetch,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useServiceGetUserBookmarks();
  // Flatten the pages data
  const bookmarks = data?.pages.flatMap((page) => page.results) || [];

  return (
    <div className="flex flex-col gap-6 lg:max-w-[1320px] lg:mx-auto lg:w-full lg:px-8 lg:py-6">
      <ProfilePagesHeader title="ذخیره شده‌ها" />
      <h1 className="hidden lg:block text-[28px] font-extrabold">
        ذخیره شده‌ها
      </h1>

      {/* Content */}
      <MondrianProductList
        products={bookmarks.map((bookmark) => {
          return {
            id: bookmark.productId,
            title: bookmark.productTitle,
            images: bookmark.productImage ? [bookmark.productImage] : [],
            basePrice: bookmark.basePrice
              ? parseInt(bookmark.basePrice)
              : undefined,
            discountPercent: bookmark.discountPercent
              ? parseInt(bookmark.discountPercent)
              : undefined,
            discountPrice: bookmark.discountPrice
              ? parseInt(bookmark.discountPrice)
              : undefined,
          };
        })}
        fetchNextPage={fetchNextPage}
        hasNextPage={hasNextPage}
        isFetchingNextPage={isFetchingNextPage}
        isLoading={isLoading}
        isError={isError}
        refetch={refetch}
        emptyState={{
          image: <img alt="cartBanner" src={bookmark} className="w-12 h-12" />,
          title: "محصولی ذخیره نشده است",
          description:
            "تمام محصول‌هایی که ذخیره کنید در این قسمت قابل مشاهده است.",
        }}
      />
    </div>
  );
}

export const meta: MetaFunction = () => {
  return [
    { title: "ذخیره شده‌ها - ویترون" },
    {
      name: "description",
      content:
        "مدیریت و مشاهده تمام محصولات ذخیره شده شما در ویترون. فیلتر بر اساس وضعیت و جستجو در محصولات.",
    },
    {
      name: "keywords",
      content: "ذخیره شده، مدیریت ذخیره شده، فروشگاه، مشتری، ویترون",
    },
    { name: "robots", content: "noindex, follow" },
    { property: "og:title", content: "ذخیره شده‌ها - ویترون" },
    {
      property: "og:description",
      content:
        "مدیریت و مشاهده تمام محصولات ذخیره شده شما در ویترون. فیلتر بر اساس وضعیت و جستجو در محصولات.",
    },
    { property: "og:type", content: "website" },
    { name: "twitter:card", content: "summary" },
    { name: "twitter:title", content: "ذخیره شده‌ها - ویترون" },
    {
      name: "twitter:description",
      content:
        "مدیریت و مشاهده تمام محصولات ذخیره شده شما در ویترون. فیلتر بر اساس وضعیت و جستجو در محصولات.",
    },
  ];
};