import { PhoneMissed, Signal } from "lucide-react";
import { useServerChannelsStore } from "~/stores/server-channels-store";
import { useServerListStore } from "~/stores/server-list-store";
import { useUsersStore } from "~/stores/users-store";
import { useVoiceStateStore } from "~/stores/voice-state-store";
import { ThemeToggle } from "../theme/theme-toggle";
import { Button } from "../ui/button";
import { Separator } from "../ui/separator";
import UserAvatar from "../user-avatar";
import { OnlineStatus } from "./online-status";
import { SettingsButton } from "./settings-button";

function VoiceStatus({
    voiceState
}: { voiceState: { serverId: string; channelId: string } }) {
    // const webrtcState = useWebRTCStore(state => state.status)

    const leaveVoiceChannel = () => {
        useVoiceStateStore.getState().leaveVoiceChannel()
    }

    const channel = useServerChannelsStore(state => state.channels[voiceState.serverId]?.[voiceState.channelId])
    const server = useServerListStore(state => state.servers[voiceState.serverId])

    return (
        <div className="gap-1 flex justify-between items-center ">
            <div className="flex items-center gap-2 text-green-500">
                <Signal className="size-5" />
                <div className="truncate max-w-60 text-sm">
                    {channel?.name || "Unknown channel"} / {server?.name}
                </div>
            </div>

            <Button variant="secondary" size="none" onClick={leaveVoiceChannel}>
                <PhoneMissed className="size-5 m-1.5" />
            </Button>
        </div>
    )
}

export default function UserStatus() {
    const user = useUsersStore(state => state.getCurrentUser()!)
    const voiceState = useVoiceStateStore(state => state.activeChannel)

    return (
        <div className="outline-1 outline-none border border-input p-2 h-full rounded-xl flex flex-col gap-2">
            {voiceState && <>
                <VoiceStatus voiceState={voiceState} />
                <Separator />
            </>
            }
            <div className="flex justify-between items-center gap-2">
                <div className="grow flex flex-row gap-2">
                    <OnlineStatus status="online">
                        <UserAvatar user={user} className="size-10" />
                    </OnlineStatus>

                    <div className="flex flex-col text-sm justify-center">
                        <div className="truncate max-w-30">
                            {user?.displayName || user?.username || "Unknown user"}
                        </div>
                        <span className="text-muted-foreground text-xs">@{user?.username}</span>
                    </div>
                </div>
                <div>
                    <div className="flex flex-row-reverse gap-2 items-center">
                        <SettingsButton />
                        <ThemeToggle />
                        {/* <Button variant="secondary" size="none">
                            <Headphones className="size-5 m-1.5" />
                        </Button> */}
                        {/* <Button variant="secondary" size="none">
                            <Mic className="size-5 m-1.5" />
                        </Button> */}
                    </div>
                </div>
            </div>
        </div>
    )
}