"use client"

import { Button } from "@/registry/ui/button"
import { ButtonGroup } from "@/registry/ui/button-group"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuGroup,
    DropdownMenuItem,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
    DropdownMenuSeparator,
    DropdownMenuSub,
    DropdownMenuSubContent,
    DropdownMenuSubTrigger,
    DropdownMenuTrigger,
} from "@/registry/ui/dropdown-menu"
import {
    ArchiveIcon,
    ArrowLeftIcon,
    CalendarPlusIcon,
    ClockIcon,
    ListFilterPlusIcon,
    MailCheckIcon,
    MoreHorizontalIcon,
    TagIcon,
    Trash2Icon,
} from "lucide-react"
import * as React from "react"

export function ButtonGroupDemo() {
    const [label, setLabel] = React.useState("personal")

    return (
        <ButtonGroup>
            <ButtonGroup className="hidden sm:flex">
                <Button variant="outline" size="icon" aria-label="Go Back">
                    <ArrowLeftIcon />
                </Button>
            </ButtonGroup>
            <ButtonGroup>
                <Button variant="outline">Archive</Button>
                <Button variant="outline">Report</Button>
            </ButtonGroup>
            <ButtonGroup>
                <Button variant="outline">Snooze</Button>
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="outline" size="icon" aria-label="More Options">
                            <MoreHorizontalIcon />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-52">
                        <DropdownMenuGroup>
                            <DropdownMenuItem>
                                <MailCheckIcon />
                                Mark as Read
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                                <ArchiveIcon />
                                Archive
                            </DropdownMenuItem>
                        </DropdownMenuGroup>
                        <DropdownMenuSeparator />
                        <DropdownMenuGroup>
                            <DropdownMenuItem>
                                <ClockIcon />
                                Snooze
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                                <CalendarPlusIcon />
                                Add to Calendar
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                                <ListFilterPlusIcon />
                                Add to List
                            </DropdownMenuItem>
                            <DropdownMenuSub>
                                <DropdownMenuSubTrigger>
                                    <TagIcon />
                                    Label As...
                                </DropdownMenuSubTrigger>
                                <DropdownMenuSubContent>
                                    <DropdownMenuRadioGroup
                                        value={label}
                                        onValueChange={setLabel}
                                    >
                                        <DropdownMenuRadioItem value="personal">
                                            Personal
                                        </DropdownMenuRadioItem>
                                        <DropdownMenuRadioItem value="work">
                                            Work
                                        </DropdownMenuRadioItem>
                                        <DropdownMenuRadioItem value="other">
                                            Other
                                        </DropdownMenuRadioItem>
                                    </DropdownMenuRadioGroup>
                                </DropdownMenuSubContent>
                            </DropdownMenuSub>
                        </DropdownMenuGroup>
                        <DropdownMenuSeparator />
                        <DropdownMenuGroup>
                            <DropdownMenuItem>
                                <Trash2Icon />
                                Trash
                            </DropdownMenuItem>
                        </DropdownMenuGroup>
                    </DropdownMenuContent>
                </DropdownMenu>
            </ButtonGroup>
        </ButtonGroup>
    )
}

export default ButtonGroupDemo