import { useEffect, useLayoutEffect, useRef } from "react";
import { useI18n } from "../../i18n";
import { typeFilterLabel } from "../../resourceTypeLabels";

const TYPE_FILTERS = [
  "all",
  "image",
  "video",
  "music",
  "ppt",
  "pdf",
  "text",
  "link",
  "archive",
] as const;

export type FilterChipsProps = {
  type: string;
  onTypeChange: (next: string) => void;
};

let lastScrollLeft = 0;

export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
  const { t } = useI18n();
  const scrollRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    if (lastScrollLeft > 0 && el.scrollLeft !== lastScrollLeft) {
      el.scrollLeft = lastScrollLeft;
    }
  }, []);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const onWheel = (e: WheelEvent) => {
      if (e.deltaY === 0 || el.scrollWidth <= el.clientWidth) return;
      e.preventDefault();
      el.scrollLeft += e.deltaY;
    };
    el.addEventListener("wheel", onWheel, { passive: false });
    return () => el.removeEventListener("wheel", onWheel);
  }, []);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const save = () => {
      lastScrollLeft = el.scrollLeft;
    };
    const saveDeferred = () => {
      window.requestAnimationFrame(save);
    };
    el.addEventListener("touchend", saveDeferred, { passive: true });
    el.addEventListener("pointerup", saveDeferred, { passive: true });
    el.addEventListener("wheel", saveDeferred, { passive: true });
    return () => {
      el.removeEventListener("touchend", saveDeferred);
      el.removeEventListener("pointerup", saveDeferred);
      el.removeEventListener("wheel", saveDeferred);
    };
  }, []);

  const tabClass = (active: boolean) =>
    [
      "relative flex h-[52px] shrink-0 items-center whitespace-nowrap px-3 pb-4 pt-3 text-[15px] leading-6 outline-none transition-colors md:h-auto md:px-1 md:py-3 md:leading-none",
      "border-b-0 md:border-b-2",
      active
        ? "border-ark-gold font-medium text-ark-gold"
        : "border-transparent text-[#97989A] [@media(hover:hover)]:hover:text-ark-gold/80 md:text-neutral-400",
    ].join(" ");

  return (
    <div className="select-none bg-ark-bg/95 backdrop-blur md:rounded-t-xl">
      <div
        ref={scrollRef}
        className="flex items-end gap-2 overflow-x-auto overflow-y-hidden px-4 pr-10 [-ms-overflow-style:none] [scrollbar-width:none] md:gap-5 md:px-1 md:pr-1 [&::-webkit-scrollbar]:hidden"
        role="tablist"
      >
        {TYPE_FILTERS.map((tp) => {
          const active = type === tp;
          return (
            <button
              key={tp}
              type="button"
              role="tab"
              aria-selected={active}
              onClick={() => onTypeChange(tp)}
              className={tabClass(active)}
            >
              {typeFilterLabel(t, tp)}
            </button>
          );
        })}
      </div>
      <div
        className="pointer-events-none absolute right-0 top-0 hidden h-[52px] w-10 bg-gradient-to-l from-ark-bg via-ark-bg/80 to-transparent max-md:block"
        aria-hidden
      />
    </div>
  );
}
