import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuPortal,
  DropdownMenuSubContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuLabel,
} from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";
import { MenuItem } from "./types";

interface IOptionProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string;
  menuItems: MenuItem[];
}

export default function Option({
  title,
  menuItems,
  className,
  children,
  ...props
}: IOptionProps) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
      <DropdownMenuContent className={cn(" w-36 p-3", className)} {...props}>
        {title && (
          <>
            <DropdownMenuLabel>{title}</DropdownMenuLabel>
            <DropdownMenuSeparator />
          </>
        )}
        {/* save a origin item */}
        {/* <DropdownMenuItem>
                          <User className="mr-2 h-4 w-4" />
                          <span>Profile</span>
                          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
                      </DropdownMenuItem> */}
        {
          <DropdownMenuGroup>
            {menuItems.map((item) => (
              <>
                {item?.subs && (
                  <DropdownMenuSub>
                    <DropdownMenuSubTrigger>
                      {item.icon}
                      <span className={cn(item.color)}>{item.name}</span>
                      {item.separator}
                    </DropdownMenuSubTrigger>
                    <DropdownMenuPortal>
                      <DropdownMenuSubContent>
                        {Array.isArray(item.subs) &&
                          item?.subs.map((subItem) => (
                            <>
                              {subItem.name && (
                                <DropdownMenuItem
                                  key={item?.name ?? "" + subItem?.name ?? ""}
                                >
                                  {subItem.icon}
                                  <span className={cn(subItem.color)}>
                                    {subItem.name}
                                  </span>
                                </DropdownMenuItem>
                              )}
                              {subItem.separator && <DropdownMenuSeparator />}
                            </>
                          ))}
                      </DropdownMenuSubContent>
                    </DropdownMenuPortal>
                  </DropdownMenuSub>
                )}
                {!item?.subs && (
                  <>
                    {item.name && (
                      <DropdownMenuItem key={item?.name ?? ""}>
                        {item.icon}
                        <span className={cn(item.color)}>{item.name}</span>
                      </DropdownMenuItem>
                    )}
                    {item.separator && <DropdownMenuSeparator />}
                  </>
                )}
              </>
            ))}
          </DropdownMenuGroup>
        }
      </DropdownMenuContent>
    </DropdownMenu>
  );
}