'use client'

import { Suspense, useMemo } from 'react'
import { useSearchParams } from 'next/navigation'
import ChatPopoutPageClient from '@/app/room/[id]/chat/ChatPopoutPageClient'
import ObsChatEmbedShell from '@/app/embed/chat/_components/ObsChatEmbedShell'
import { parseObsChatEmbedSearchParams } from '@/lib/embed/obsChatEmbed'

type Props = {
    roomId: string
    roomPublicId: string
    streamUserId: string
    streamChannelName: string
    streamAvatar: string
    currentUserId?: string | null
    currentUserDisplayName?: string | null
}

function ChatObsEmbedInner(props: Props) {
    const searchParams = useSearchParams()
    const obsOptions = useMemo(
        () => parseObsChatEmbedSearchParams(searchParams),
        [searchParams]
    )

    return (
        <ObsChatEmbedShell options={obsOptions}>
            <ChatPopoutPageClient
                {...props}
                embed
                obsOverlay={obsOptions}
            />
        </ObsChatEmbedShell>
    )
}

export default function ChatObsEmbedClient(props: Props) {
    return (
        <Suspense fallback={<div className="fixed inset-0 bg-transparent" aria-hidden />}>
            <ChatObsEmbedInner {...props} />
        </Suspense>
    )
}