"use client";

import { useRouter } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import useConversation from "../../hooks/useConversation";
import { Button, Modal, Card, Group, Stack, Text, ThemeIcon } from "@mantine/core";
import ConversationBox from "./ConversationBox";
import { IconUserPlus} from "@tabler/icons-react";
import { socket } from "../../../socket";
import { useSession } from "next-auth/react";
import { find } from "lodash";

import { useDisclosure } from "@mantine/hooks";
import { User } from "@prisma/client";
import GroupChatModal from "./GroupChatModal";


export default function ConversationList({initialItems, users}: {initialItems: any, users: User[]}) {
    const [items, setItems] = useState(initialItems);

    // Control Group Modal
    const [opened, { open, close }] = useDisclosure(false);

    const [ newMessage, setNewMessage ] = useState(false);
    const router = useRouter();

    const session = useSession();



    const { conversationId, isOpen } = useConversation();


    const socketKey = useMemo(() => {
        return session.data?.user?.email;
    }, [session.data?.user?.email])



    // Join Conversation Room To Receive Real Time Messages
    useEffect(() => {
        if ( !socketKey ) {
            return ;
        }
        socket.emit('join', socketKey);

        const seenHandler = (conversation) => {
            console.log(conversation);
            setItems([])
            console.log(items)
        }

        const newHandler = ( conversation ) => {
            setItems((current) => {
                if ( find(current, {id: conversationId}) ) {
                    return current;
                }

                return [conversation, ...current];
            })
        }

        // Socket Emit
        const deleteHandler = (conversation) => {
            setItems((currentItems) => {
                return currentItems.filter((item) => item.id !== conversation.id);
            });
        }




        socket.on("updated conversation", seenHandler);
        socket.on("conversation:new", newHandler);
        socket.on("conversation:remove", deleteHandler);

        return() => {
            // Leave the socket room on dismount
            socket.emit('leave', String(socketKey));
            socket.off("updated conversation", seenHandler);
            socket.off("conversation:new", newHandler);
            socket.off("conversation:remove", deleteHandler);
        }


    }, [socketKey])

    return (


        <>

            <GroupChatModal opened={opened} close={close} users={users} />

            <Card shadow="sm" withBorder flex={1}>

                <Card.Section p="xs" withBorder>
                    <Group wrap="nowrap" flex={1} justify="space-between">
                        <Text fw={700} size="lg"> Conversations </Text>

                            <ThemeIcon variant="light" size="md" onClick={open}>
                                <IconUserPlus style={{ width: '70%', height: '70%' }} />
                            </ThemeIcon>
                    </Group>
                </Card.Section>

                <Card.Section/>
                    <Stack flex={1} gap={0}>

                        {
                            items.map((item: any) => (
                                <ConversationBox
                                    key={item.id}
                                    data={item}
                                    selected={conversationId === item.id}
                                    newMessage={false}
                                />

                            ))
                        }

                    </Stack>
                <Card.Section/>

            </Card>

        </>


    );
}