"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 clsx from "clsx";
import { usePathname } from "next/navigation";

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,
  // proxyBase,
}: {
  src: string;
  size: number;
  alt: string;
  // proxyBase: string | null;
}) {
  const isSvg = src.endsWith(".svg");

  if (isSvg) {
    return (
      <div
        className="shrink-0 bg-primary"
        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}
        className="shrink-0 object-contain"
      />
    );
  }

  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={src}
      width={size}
      height={size}
      alt={alt}
      loading="lazy"
      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 proxyBase = segment != null ? `/${segment}` : null;
  const { renderer: Renderer, imageSize } = variantConfig[variant];

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

  return (
    <HorizontalScrollView
      className={clsx(
        "w-full noscrollbar py-4!",
        variant === "large" && "mt-4!",
        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;

        return (
          <Renderer
            key={item.id}
            className={clsx(isSelected && "bg-container!")}
            onClick={handleSelect(item.id)}
          >
            <CategoryImage
              src={item.avatarUrl || "/assets/images/food-image.png"}
              size={imageSize}
              alt="category image"
              // proxyBase={proxyBase}
            />
            <span className="text-xs text-foreground text-center">
              {item.title}
            </span>
          </Renderer>
        );
      })}
    </HorizontalScrollView>
  );
};

export default CategoryScroll;
