import { useEffect, useState } from "react";
import { Call, Conversation, Group, User } from "@cometchat/chat-sdk-javascript";
import {
    CometChatUIKitLoginListener,
} from "@cometchat/chat-uikit-react";

interface SelectorProps {
    items?: Group[];
    onSelectorItemClicked?: (input: User | Group | Conversation | Call, type: string) => void;
    onHide?: () => void;
    onNewChatClicked?: () => void;
}

export const ChatSelector = (props: SelectorProps) => {
    const { items = [], onSelectorItemClicked = () => { } } = props;

    const [loggedInUser, setLoggedInUser] = useState<CometChat.User | null>();
    const [activeItem, setActiveItem] = useState<any>();

    useEffect(() => {
        let loggedInUsers = CometChatUIKitLoginListener.getLoggedInUser();
        setLoggedInUser(loggedInUsers);
    }, [CometChatUIKitLoginListener?.getLoggedInUser()]);

    return (
        <>
            {loggedInUser && (
                <div className="custom-group-list">
                    {items.map((item: any) => (
                        <div
                            key={item.getGuid ? item.getGuid() : item.id}
                            className={`group-item ${activeItem?.getGuid && activeItem?.getGuid() === item.getGuid() ? "active" : ""
                                }`}
                            onClick={() => {
                                setActiveItem(item);
                                onSelectorItemClicked(item, "updateSelectedItemGroup");
                            }}
                        >
                            {item.getName ? item.getName() : item.name} {/* Adjust for Group or User types */}
                        </div>
                    ))}
                </div>
            )}
        </>
    );
};