"use client"

import useSession from "@/lib/hooks/useSession";
import {cn} from "@/lib/utils";
import HiddenScrollbar from "@/components/Application/Common/Session/HiddenScrollbar";
import SearchInput from "@/components/Application/Common/Session/inputs/SearchInput";
import ChatListItem, {dummyList} from "@/components/Application/Common/Session/ChatListItem";

export default function SessionChatsListContainer() {
    // todo: missing  query session chats here and loop over them
    const sessionHook = useSession()


    return (
        <div className={cn("h-full w-full md:w-64", {
            "hidden md:block": sessionHook.isSessionChatOpened
        })}>

            <h1 className={"h-16 text-xl md:text-3xl font-black text-gray-600 flex items-center"}>Messages</h1>

            <HiddenScrollbar
                className={"h-[calc(100vh_-_10rem)] md:h-[calc(100vh_-_5rem)] border rounded-xl p-2"}>

                <SearchInput className={"sticky"}/>

                <div className={"flex flex-col gap-2 mt-4"}>
                    {
                        dummyList.map((chatItem, index) => {
                            return (
                                <ChatListItem
                                    selected={sessionHook.selectedSessionChatId === chatItem.sessionChatId}
                                    {...chatItem}
                                    key={index}/>
                            )
                        })
                    }
                </div>
            </HiddenScrollbar>

        </div>
    )
}