"use client"

import { Button } from "@/registry/ui/button"
import { ButtonGroup } from "@/registry/ui/button-group"
import {
    InputGroup,
    InputGroupAddon,
    InputGroupButton,
    InputGroupInput,
} from "@/registry/ui/input-group"
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
    TooltipProvider
} from "@/registry/ui/tooltip"
import { AudioLinesIcon, PlusIcon } from "lucide-react"
import * as React from "react"

export function ButtonGroupInputGroupDemo() {
    const [voiceEnabled, setVoiceEnabled] = React.useState(false)

    return (
        <ButtonGroup className="[--radius:9999rem]">
            <ButtonGroup>
                <Button variant="outline" size="icon">
                    <PlusIcon />
                </Button>
            </ButtonGroup>
            <ButtonGroup>
                <InputGroup>
                    <InputGroupInput
                        placeholder={
                            voiceEnabled ? "Record and send audio..." : "Send a message..."
                        }
                        disabled={voiceEnabled}
                    />
                    <InputGroupAddon align="inline-end">
                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <InputGroupButton
                                        onClick={() => setVoiceEnabled(!voiceEnabled)}
                                        size="icon-xs"
                                        data-active={voiceEnabled}
                                        className="data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100"
                                        aria-pressed={voiceEnabled}
                                    >
                                        <AudioLinesIcon />
                                    </InputGroupButton>
                                </TooltipTrigger>
                                <TooltipContent>Voice Mode</TooltipContent>
                            </Tooltip>
                        </TooltipProvider>
                    </InputGroupAddon>
                </InputGroup>
            </ButtonGroup>
        </ButtonGroup>
    )
}

export default ButtonGroupInputGroupDemo