"use client";

import { Button as BaseButton } from "@base-ui/react/button";
import { cn } from "@/lib/utils";
import { X } from "@phosphor-icons/react";
import {
  AnimatePresence,
  LayoutGroup,
  m,
  MotionConfig,
  Transition,
  useReducedMotion,
  Variants,
} from "motion/react";
import { useState } from "react";

type Item = {
  id: number;
  name: string;
  className: string;
};

const list: Item[] = [
  { name: "marketting", className: "text-amber-600 dark:text-amber-400 bg-amber-500/12" },
  { name: "product", className: "text-blue-600 dark:text-blue-400 bg-blue-500/12" },
  { name: "Development", className: "text-emerald-600 dark:text-emerald-400 bg-emerald-500/12" },
  { name: "design", className: "text-violet-600 dark:text-violet-400 bg-violet-500/12" },
  { name: "sales", className: "text-rose-600 dark:text-rose-400 bg-rose-500/12" },
  { name: "stakeholder", className: "text-indigo-600 dark:text-indigo-400 bg-indigo-500/12" },
].map((i, idx) => ({
  ...i,
  id: idx + 1,
}));

const TRANSITION: Transition = {
  type: "tween",
  duration: 0.24,
  ease: [0.645, 0.045, 0.355, 1],
};

const clearVariants: Variants = {
  hidden: {
    opacity: 0,
    scale: 0.96,
    x: -8,
    transition: { duration: 0.16, ease: [0.215, 0.61, 0.355, 1] },
  },
  visible: {
    opacity: 1,
    scale: 1,
    x: 0,
    transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
  },
};

const ClickSelect = () => {
  const shouldReduceMotion = useReducedMotion();
  const [selected, setSelected] = useState<Item[]>([]);
  const [items, setItems] = useState<Item[]>(list);
  const [hovered, setHovered] = useState(false);

  const handleAdd = (item: Item) => {
    setItems((current) => current.filter((entry) => entry.id !== item.id));
    setSelected((current) =>
      current.some((entry) => entry.id === item.id)
        ? current
        : [...current, item],
    );
  };

  const handleRemove = (item: Item) => {
    setSelected((current) => current.filter((entry) => entry.id !== item.id));
    setItems((current) =>
      current.some((entry) => entry.id === item.id)
        ? current
        : [...current, item].sort((a, b) => a.id - b.id),
    );
  };

  const handleClear = () => {
    setSelected([]);
    setItems(list);
    setHovered(false);
  };

  const showClearAll = hovered && selected.length >= 3;
  const clearMotion = shouldReduceMotion
    ? {
        hidden: { opacity: 1, scale: 1, x: 0 },
        visible: { opacity: 1, scale: 1, x: 0 },
      }
    : clearVariants;

  return (
    <MotionConfig
      transition={shouldReduceMotion ? { duration: 0 } : TRANSITION}
      reducedMotion="user"
    >
      <LayoutGroup id="click-select">
        <div className="flex size-full flex-col items-center justify-center gap-4 rounded-xl">
          <m.ul
            layout
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
            className="flex h-11 w-[30rem] max-w-[calc(100%-2rem)] items-center gap-2 overflow-hidden px-2"
            aria-label="Selected filters"
          >
            <AnimatePresence initial={false} mode="popLayout">
              {showClearAll && (
                <m.li
                  key="clear"
                  variants={clearMotion}
                  initial={shouldReduceMotion ? false : "hidden"}
                  animate="visible"
                  exit="hidden"
                  layout
                  className="z-0 mr-1 flex h-11 shrink-0 items-center"
                >
                  <BaseButton
                    type="button"
                    onClick={handleClear}
                    className="h-11 touch-manipulation whitespace-nowrap rounded-lg px-2 text-sm text-muted-foreground outline-none transition-colors duration-150 ease-[ease] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
                  >
                    Clear all
                  </BaseButton>
                </m.li>
              )}
              {selected.map((select) => (
                <m.li
                  key={select.id}
                  layout
                  layoutId={`filter-${select.id}`}
                  className={cn(
                    "relative z-0 flex w-fit shrink-0 items-center gap-2 rounded-full py-1 pl-3 pr-1 capitalize will-change-transform",
                    select.className,
                  )}
                >
                  <span>{select.name}</span>
                  <BaseButton
                    type="button"
                    onClick={() => handleRemove(select)}
                    aria-label={`Remove ${select.name} filter`}
                    className="flex size-7 touch-manipulation items-center justify-center rounded-full bg-current/10 outline-none transition-colors duration-150 ease-out hover:bg-current/20 active:scale-[0.97] focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
                  >
                    <X className="size-3.5" />
                  </BaseButton>
                </m.li>
              ))}
            </AnimatePresence>
          </m.ul>
          <m.div
            layout
            className="relative flex h-auto w-96 flex-col gap-4 overflow-hidden rounded-xl border bg-background p-4 shadow-lg"
          >
            <div className="flex items-center justify-between">
              <h2>Select filter</h2>
              <m.button
                type="button"
                onClick={handleClear}
                disabled={items.length === list.length}
                whileTap={{ scale: 0.97 }}
                className="h-11 touch-manipulation rounded-lg px-2 outline-none transition-colors duration-150 ease-[ease] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none"
              >
                Clear
              </m.button>
            </div>
            <ul className="flex flex-col gap-2">
              <AnimatePresence mode="popLayout">
                {items.length > 0 ? (
                  items.map((item) => (
                    <m.li
                      key={item.id}
                      layout
                      layoutId={`filter-${item.id}`}
                      className={cn(
                        "relative z-0 flex w-fit rounded-full capitalize will-change-transform",
                        item.className,
                      )}
                    >
                      <BaseButton
                        type="button"
                        onClick={() => handleAdd(item)}
                        className="min-h-11 touch-manipulation rounded-full px-3 text-left outline-none transition-[filter,transform] duration-150 ease-out hover:brightness-[0.88] dark:hover:brightness-[1.15] active:scale-[0.97] focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
                      >
                        {item.name}
                      </BaseButton>
                    </m.li>
                  ))
                ) : (
                  <m.li
                    key="no-items"
                    initial={{ opacity: 0, y: 4 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -4 }}
                    className="flex min-h-11 items-center text-muted-foreground"
                  >
                    No items
                  </m.li>
                )}
              </AnimatePresence>
            </ul>
          </m.div>
        </div>
      </LayoutGroup>
    </MotionConfig>
  );
};

export default ClickSelect;
Click Select

Select filter
