Filter Bar

import { useState } from "react";
import {
  FilterBar,
  FilterBarActions,
  FilterBarActiveFilters,
  FilterBarControls,
  FilterBarFilters,
  FilterBarSearch,
} from "@/components/patterns/filter-bar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Menu,
  MenuCheckboxItem,
  MenuPopup,
  MenuTrigger,
} from "@/components/ui/menu";
import { SearchIcon, SlidersHorizontalIcon, XIcon } from "lucide-react";

const statusOptions = ["Active", "Trial"] as const;

export function Example() {
  const [query, setQuery] = useState("");
  const [activeStatuses, setActiveStatuses] = useState<Set<string>>(
    () => new Set(["Active"]),
  );
  const hasActiveFilters = Boolean(query || activeStatuses.size);

  function setStatus(status: string, checked: boolean) {
    setActiveStatuses((current) => {
      const next = new Set(current);

      if (checked) {
        next.add(status);
      } else {
        next.delete(status);
      }

      return next;
    });
  }

  function clearFilters() {
    setQuery("");
    setActiveStatuses(new Set());
  }

  return (
    <FilterBar className="w-full max-w-2xl">
      <FilterBarControls>
        <FilterBarSearch>
          <div className="relative">
            <SearchIcon className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              aria-label="Search customers"
              className="pl-8"
              onChange={(event) => setQuery(event.target.value)}
              placeholder="Search customers"
              type="search"
              value={query}
            />
          </div>
        </FilterBarSearch>
        <FilterBarFilters>
          <Menu>
            <MenuTrigger render={<Button type="button" variant="outline" />}>
              <SlidersHorizontalIcon />
              Status
            </MenuTrigger>
            <MenuPopup align="end">
              {statusOptions.map((status) => (
                <MenuCheckboxItem
                  checked={activeStatuses.has(status)}
                  key={status}
                  onCheckedChange={(checked) => setStatus(status, checked)}
                >
                  {status}
                </MenuCheckboxItem>
              ))}
            </MenuPopup>
          </Menu>
          {hasActiveFilters ? (
            <FilterBarActions>
              <Button onClick={clearFilters} type="button" variant="ghost">
                <XIcon />
                Clear
              </Button>
            </FilterBarActions>
          ) : null}
        </FilterBarFilters>
      </FilterBarControls>
      {hasActiveFilters ? (
        <FilterBarActiveFilters>
          {query ? <Badge variant="outline">Search: {query}</Badge> : null}
          {Array.from(activeStatuses).map((status) => (
            <Badge key={status} variant="secondary">{status}</Badge>
          ))}
        </FilterBarActiveFilters>
      ) : null}
    </FilterBar>
  );
}