"use client";

import { Category } from "@/app/[name]/(Main)/types/Types";
import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRenderer";
import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
import { GLASS_SURFACE_DISABLED, GLASS_SURFACE_SELECTED } from "@/lib/styles/glassSurface";
import clsx from "clsx";
import { usePathname } from "next/navigation";

/** TODO: remove when backend sends avatarRenderMode */
const COLORED_SVG_RESTAURANT_SLUGS = new Set(["havasone"]);

const SVG_MASK_STYLE = {
  maskSize: "contain",
  maskRepeat: "no-repeat",
  maskPosition: "center",
  WebkitMaskSize: "contain",
  WebkitMaskRepeat: "no-repeat",
  WebkitMaskPosition: "center",
} as const;

function CategoryImage({ src, size, alt, tintWithPrimary = true, disabled = false }: { src: string; size: number; alt: string; tintWithPrimary?: boolean; disabled?: boolean }) {
  const isSvg = src.endsWith(".svg");
  const shouldUseSvgMask = isSvg && tintWithPrimary;

  if (shouldUseSvgMask) {
    return (
      <div
        className={clsx("shrink-0 bg-primary", disabled && "opacity-40")}
        style={{
          width: size,
          height: size,
          maskImage: `url(${src})`,
          WebkitMaskImage: `url(${src})`,
          ...SVG_MASK_STYLE,
        }}
        role="img"
        aria-label={alt}
      />
    );
  }

  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={src}
      width={size}
      height={size}
      alt={alt}
      loading="lazy"
      className={clsx("shrink-0 object-contain", disabled && "opacity-40")}
      onError={(event) => {
        event.currentTarget.src = "/assets/images/food-image.png";
      }}
    />
  );
}

type Variant = "large" | "small";

const variantConfig: Record<
  Variant,
  {
    renderer: typeof CategoryItemRenderer;
    imageSize: number;
  }
> = {
  large: {
    renderer: CategoryItemRenderer,
    imageSize: 32,
  },
  small: {
    renderer: CategorySmallItemRenderer,
    imageSize: 24,
  },
};

type Props = {
  categories: Category[];
  selectedCategory: string;
  onSelect: (categoryId: string) => void;
  variant?: Variant;
  className?: string;
};

const CategoryScroll = ({ categories, selectedCategory, onSelect, variant = "large", className }: Props) => {
  const segment = usePathname()?.split("/").filter(Boolean)[0];
  const usesColoredSvg = segment != null && COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase());
  const { renderer: Renderer, imageSize } = variantConfig[variant];

  const handleSelect = (categoryId: string) => () => onSelect(categoryId);

  return (
    <HorizontalScrollView className={clsx("w-full noscrollbar py-2!", variant === "large" && "mt-3!", className)}>
      {/* <Renderer
        key="all"
        className={clsx(selectedCategory === "0" && "bg-container!")}
        onClick={handleSelect(0)}
      >
        <Image
          priority
          src="/assets/images/food-image.png"
          width={imageSize}
          height={imageSize}
          alt="category image"
        />
        <span className="text-xs text-foreground">همه</span>
      </Renderer> */}
      {categories.map((item) => {
        const isSelected = item.id === selectedCategory;
        const isDisabled = !item.isActive;

        return (
          <Renderer
            key={item.id}
            className={clsx(!isSelected && GLASS_SURFACE_DISABLED, isDisabled && "cursor-not-allowed", isSelected && !isDisabled && GLASS_SURFACE_SELECTED)}
            onClick={isDisabled ? undefined : handleSelect(item.id)}
            aria-disabled={isDisabled}
          >
            <CategoryImage src={item.avatarUrl || "/assets/images/food-image.png"} size={imageSize} alt="category image" tintWithPrimary={!usesColoredSvg} disabled={isDisabled} />
            <span className={clsx("text-xs text-center whitespace-nowrap", isDisabled ? "text-disabled-text" : "text-foreground")}>{item.title}</span>
          </Renderer>
        );
      })}
    </HorizontalScrollView>
  );
};

export default CategoryScroll;
