"use client";

import { Check, ChevronsUpDown, Layers } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useViewStore } from "@/lib/stores/view-store";
import { cn } from "@/lib/utils";

const GROUP_OPTIONS: { label: string; value: string | null }[] = [
  { label: "None", value: null },
  { label: "Status", value: "status" },
  { label: "Type", value: "type" },
  { label: "Priority", value: "priority" },
  { label: "Assignee", value: "assignee" },
];

function labelForValue(value: string | null): string {
  return GROUP_OPTIONS.find((o) => o.value === value)?.label ?? "None";
}

export function GroupConfig() {
  const groupBy = useViewStore((s) => s.config.groupBy);
  const setGroupBy = useViewStore((s) => s.setGroupBy);

  const selectedLabel = labelForValue(groupBy);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          className="h-8 max-w-[11rem] gap-1.5 px-2 text-xs"
        >
          <Layers className="size-3.5 shrink-0" />
          <span className="truncate">
            Group by{" "}
            <span className="font-medium text-foreground">{selectedLabel}</span>
          </span>
          <ChevronsUpDown className="size-3 shrink-0 opacity-50" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-48">
        {GROUP_OPTIONS.map((opt) => (
          <DropdownMenuItem
            key={opt.label}
            className="gap-2 text-xs"
            onClick={() => setGroupBy(opt.value)}
          >
            <span
              className={cn(
                "flex size-4 items-center justify-center",
                groupBy === opt.value ? "opacity-100" : "opacity-0",
              )}
            >
              <Check className="size-3.5" />
            </span>
            {opt.label}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}