Morph Sort Dropdown

"use client";

import { useState, useRef, useEffect, type Ref } from "react";
import { motion, AnimatePresence, LayoutGroup } from "motion/react";
import { SlidersHorizontal } from "@phosphor-icons/react";
import { cn } from "@/lib/cn";

/* ─── Constants ─── */

const SPRING_TRANSITION = {
  type: "spring" as const,
  stiffness: 300,
  damping: 20,
  mass: 0.8,
};

enum SortBy {
  LATEST = "LATEST",
  POPULAR = "POPULAR",
  TRENDING = "TRENDING",
}

const SORT_OPTIONS = [
  { value: SortBy.LATEST, label: "Latest" },
  { value: SortBy.POPULAR, label: "Most popular" },
  { value: SortBy.TRENDING, label: "Trending" },
] as const;

const SORT_LABELS = Object.fromEntries(
  SORT_OPTIONS.map((o) => [o.value, o.label]),
) as Record<SortBy, string>;

/* ─── SortTrigger ─── */

/**
 * Compact card button that morphs into the dropdown panel.
 * Uses layoutId="sort-morph" to share layout animation with SortDropdown.
 * @param {SortBy} sortBy - Current sort value [Required]
 * @param {() => void} onClick - Open handler [Required]
 */
const SortTrigger = forwardRef<
  HTMLDivElement,
  { sortBy: SortBy; onClick: () => void }
>(({ sortBy, onClick }, ref) => (
  <motion.div
    ref={ref}
    layoutId="sort-morph"
    onClick={onClick}
    role="button"
    tabIndex={0}
    onKeyDown={(e) => {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        onClick();
      }
    }}
    className="relative flex w-28 flex-shrink-0 cursor-pointer flex-col items-center gap-1 overflow-hidden rounded-2xl border border-neutral-200 bg-white p-1 transition-shadow hover:shadow-sm"
    transition={SPRING_TRANSITION}
  >
    <div className="flex h-[100px] w-[104px] flex-col items-center justify-center gap-1 rounded-lg bg-neutral-50 text-neutral-500">
      <motion.span
        layoutId="sort-title"
        transition={SPRING_TRANSITION}
        className="text-xs font-medium"
      >
        Sort by
      </motion.span>
      <motion.div layoutId="sort-icon" transition={SPRING_TRANSITION}>
        <SlidersHorizontal weight="duotone" className="size-5" />
      </motion.div>
    </div>
    <div className="bg-white px-1">
      <motion.span
        layoutId="sort-value"
        transition={SPRING_TRANSITION}
        className="truncate text-center text-xs text-neutral-500"
      >
        {SORT_LABELS[sortBy]}
      </motion.span>
    </div>
  </motion.div>
));


/* ─── SortDropdown ─── */

/**
 * Dropdown panel that morphs from the trigger card.
 * Shares layoutId="sort-morph" with SortTrigger for the container morph,
 * plus "sort-icon" and "sort-title" for inner element transitions.
 * @param {boolean} isOpen - Whether dropdown is visible [Required]
 * @param {DOMRect | null} originRect - Trigger bounding rect for positioning [Required]
 * @param {SortBy} sortBy - Current sort value [Required]
 * @param {(value: SortBy) => void} onSelect - Selection handler [Required]
 * @param {() => void} onClose - Close handler [Required]
 */
function SortDropdown({
  isOpen,
  originRect,
  sortBy,
  onSelect,
  onClose,
}: {
  isOpen: boolean;
  originRect: DOMRect | null;
  sortBy: SortBy;
  onSelect: (value: SortBy) => void;
  onClose: () => void;
}) {
  useEffect(() => {
    if (!isOpen) return;
    const handler = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", handler);
    return () => document.removeEventListener("keydown", handler);
  }, [isOpen, onClose]);

  return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* Backdrop overlay */}
          <motion.div
            className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
            onClick={onClose}
            key="sort-overlay"
          />
          {/* Morphing dropdown panel */}
          <motion.div
            layoutId="sort-morph"
            className="pointer-events-auto fixed z-50 w-[220px] rounded-2xl border border-neutral-200 bg-white p-2 shadow-lg"
            style={{
              top: originRect?.top,
              left: originRect?.left,
            }}
            transition={SPRING_TRANSITION}
            onClick={(e) => e.stopPropagation()}
          >
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.15, duration: 0.15 }}
            >
              {/* Header: icon + title */}
              <div className="flex items-center gap-2 pb-3">
                <motion.div layoutId="sort-icon" transition={SPRING_TRANSITION}>
                  <SlidersHorizontal weight="duotone" className="size-5" />
                </motion.div>
                <motion.span
                  layoutId="sort-title"
                  transition={SPRING_TRANSITION}
                  className="text-sm font-semibold text-neutral-900"
                >
                  Sort by
                </motion.span>
              </div>
              {/* Option list with staggered entry */}
              <div className="flex flex-col gap-1">
                {SORT_OPTIONS.map((option, index) => {
                  const isActive = sortBy === option.value;
                  return (
                    <motion.button
                      type="button"
                      key={option.value}
                      initial={{ opacity: 0, y: 8 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{
                        ...SPRING_TRANSITION,
                        delay: 0.15 + 0.05 * index,
                      }}
                      onClick={() => {
                        onSelect(option.value);
                        onClose();
                      }}
                      className={cn(
                        "rounded-lg px-3 py-2.5 text-left text-sm transition-colors",
                        isActive
                          ? "bg-neutral-50 font-medium text-neutral-900"
                          : "text-neutral-500 hover:bg-neutral-50",
                      )}
                    >
                      {option.label}
                    </motion.button>
                  );
                })}
              </div>
            </motion.div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
}

/* ─── Usage Example ─── */

export default function SortMorphExample() {
  const [isOpen, setIsOpen] = useState(false);
  const [sortBy, setSortBy] = useState<SortBy>(SortBy.POPULAR);
  const [originRect, setOriginRect] = useState<DOMRect | null>(null);
  const triggerRef = useRef<HTMLDivElement>(null);

  return (
    <LayoutGroup>
      <div className="relative">
        {isOpen ? (
          <div className="w-28 flex-shrink-0" />
        ) : (
          <SortTrigger
            ref={triggerRef}
            sortBy={sortBy}
            onClick={() => {
              if (triggerRef.current) {
                setOriginRect(triggerRef.current.getBoundingClientRect());
              }
              setIsOpen(true);
            }}
          />
        )}
        <SortDropdown
          isOpen={isOpen}
          originRect={originRect}
          sortBy={sortBy}
          onSelect={setSortBy}
          onClose={() => setIsOpen(false)}
        />
      </div>
    </LayoutGroup>
  );
}