import { ChatHeader } from "@/app/components/ChatHeader/ChatHeader";
import { DialogInput } from "@/app/components/DialogInput/DialogInput";
import { Messages } from "@/app/components/Messages/Messages";
import { DialogProvider } from "@/app/providers/DialogProvider/DialogProvider";
import { Flex } from "@mantine/core";
import { useParams } from "react-router-dom";
import { useRosettaBreakpoints } from "@/app/hooks/useRosettaBreakpoints";
import { useEffect } from "react";
import { useViewPanelsState, ViewPanelsState } from "@/app/hooks/useViewPanelsState";
import { GroupHeader } from "@/app/components/GroupHeader/GroupHeader";
import { useGroups } from "@/app/providers/DialogProvider/useGroups";

export function Chat() {
    const params = useParams();
    const dialog = params.id || "DELETED";
    const {lg} = useRosettaBreakpoints();
    const [__, setViewState] = useViewPanelsState();
    const {hasGroup} = useGroups();

    useEffect(() => {
        if(!lg){
            setViewState(ViewPanelsState.DIALOGS_PANEL_HIDE);
            return;
        }
        if(lg){
            setViewState(ViewPanelsState.DIALOGS_PANEL_SHOW);
        }
    }, [lg]);
    
    return (<>
        <DialogProvider dialog={dialog} key={dialog}>
            <Flex direction={'column'} justify={'space-between'} h={'100%'}>
                {/* Group Header */}
                {hasGroup(dialog) && <GroupHeader></GroupHeader>}
                {/* Dialog peer to peer Header */}
                {!hasGroup(dialog) && <ChatHeader></ChatHeader>}
                <Messages></Messages>
                <DialogInput key={dialog}></DialogInput>
            </Flex>
        </DialogProvider>
    </>);
}