"use client";

import { MenuItem } from "../types";
import { PlusIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { useState } from "react";
import {
  Command,
  CommandGroup,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { Checkbox } from "@radix-ui/react-checkbox";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import TagList2 from "../../tag/tag-list-2";
import { tags } from "../../tag/data";

const menuItems: MenuItem[] = [
  { name: "打印表单" },
  { name: "模板分享" },
  { name: "文件管理" },
  { separator: true },
  {
    icon: <PlusIcon className="mr-2 h-4 w-4" />,
    name: "新建标签",
  },
];

export default function TagOption() {
  const [selectedTags, setSelectedTags] = useState<string[]>([]);
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState("");
  // const handleSelect = (id: string) => {
  //   if (selectedTags.includes(id)) {
  //     setSelectedTags(selectedTags.filter((it) => it !== id));
  //   } else {
  //     setSelectedTags([...selectedTags, id]);
  //   }
  // };

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button variant="outline" aria-expanded={open}>
          Tag
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0">
        <TagList2 list={tags} />
      </PopoverContent>
    </Popover>
  );
}