Filter menu

"use client"

import { useState } from "react"
import {
  CircleDashedIcon,
  SignalHighIcon,
  TagIcon,
  UserIcon,
  XIcon,
} from "lucide-react"

import {
  FilterMenu,
  type FilterField,
  type FilterValue,
} from "@/components/ui/filter-menu"

const FIELDS: FilterField[] = [
  {
    id: "status",
    label: "Status",
    icon: <CircleDashedIcon />,
    options: [
      { value: "backlog", label: "Backlog" },
      { value: "todo", label: "Todo" },
      { value: "in-progress", label: "In progress" },
      { value: "done", label: "Done" },
    ],
  },
  {
    id: "assignee",
    label: "Assignee",
    icon: <UserIcon />,
    options: [
      { value: "ada", label: "Ada Lovelace" },
      { value: "grace", label: "Grace Hopper" },
      { value: "katherine", label: "Katherine Johnson" },
    ],
  },
  {
    id: "priority",
    label: "Priority",
    icon: <SignalHighIcon />,
    options: [
      { value: "urgent", label: "Urgent" },
      { value: "high", label: "High" },
      { value: "medium", label: "Medium" },
      { value: "low", label: "Low" },
    ],
  },
  {
    id: "label",
    label: "Label",
    icon: <TagIcon />,
    options: [
      { value: "bug", label: "Bug" },
      { value: "design", label: "Design" },
    ],
  },
]

const labelOf = (fieldId: string, optionValue: string) =>
  FIELDS.find((f) => f.id === fieldId)?.options.find(
    (o) => o.value === optionValue
  )?.label ?? optionValue

export default function FilterMenuDemo() {
  const [value, setValue] = useState<FilterValue>({
    status: ["todo", "in-progress"],
    priority: ["urgent"],
  })

  return (
    <div className="flex min-h-96 w-full max-w-2xl flex-wrap items-start gap-2 p-6">
      <FilterMenu fields={FIELDS} value={value} onValueChange={setValue} />
      {Object.entries(value).map(([fieldId, values]) => {
        const field = FIELDS.find((f) => f.id === fieldId)
        return (
          <span
            key={fieldId}
            className="inline-flex h-8 items-center gap-1.5 rounded-full border border-border bg-card pr-1 pl-3 text-sm"
          >
            <span className="text-muted-foreground">{field?.label}</span>
            {values.map((v) => labelOf(fieldId, v)).join(", ")}
            <button
              type="button"
              aria-label={`Remove ${field?.label} filter`}
              onClick={() => {
                const rest = { ...value }
                delete rest[fieldId]
                setValue(rest)
              }}
              className="flex size-6 items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"
            >
              <XIcon className="size-3.5" />
            </button>
          </span>
        )
      })}
    </div>
  )
}