"use client";

import * as React from "react";
import { Badge, BadgeDot } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  CALENDAR_EVENT_SOURCE_TYPES,
  CALENDAR_EVENT_TYPE_COLORS,
  CALENDAR_EVENT_TYPE_LABELS,
  type CalendarEventSourceType,
} from "@/api/rtk/calendar-api";
import { cn } from "@/lib/utils";

interface CalendarEventFiltersProps {
  enabledTypes: CalendarEventSourceType[];
  onToggle: (type: CalendarEventSourceType) => void;
  onSelectAll: () => void;
  onClearAll: () => void;
  hiddenTypes?: CalendarEventSourceType[];
}

export function CalendarEventFilters({
  enabledTypes,
  onToggle,
  onSelectAll,
  onClearAll,
  hiddenTypes = [],
}: CalendarEventFiltersProps) {
  const visibleTypes = CALENDAR_EVENT_SOURCE_TYPES.filter(
    (type) => !hiddenTypes.includes(type),
  );

  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div className="flex flex-wrap items-center gap-2">
        <span className="mr-1 text-xs font-medium text-muted-foreground">
          Event types
        </span>
        {visibleTypes.map((type) => {
          const active = enabledTypes.includes(type);
          return (
            <Badge
              key={type}
              asChild
              variant={active ? "filterActive" : "filter"}
              size="lg"
            >
              <button
                type="button"
                aria-pressed={active}
                onClick={() => onToggle(type)}
              >
                <BadgeDot
                  className={cn(
                    CALENDAR_EVENT_TYPE_COLORS[type],
                    !active && "opacity-50",
                  )}
                />
                {CALENDAR_EVENT_TYPE_LABELS[type]}
              </button>
            </Badge>
          );
        })}
      </div>

      <div className="flex flex-wrap items-center gap-2 sm:justify-end">
        <div className="flex items-center rounded-full border bg-muted/40 p-0.5">
          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="h-7 rounded-full px-3 text-xs"
            onClick={onSelectAll}
          >
            All
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="h-7 rounded-full px-3 text-xs"
            onClick={onClearAll}
          >
            None
          </Button>
        </div>
      </div>
    </div>
  );
}