@extends('layouts/eatvio')
@section('page_title', 'Chat')
@section('main_section')
<section class="py-md-3 px-0 px-md-2 px-lg-3 --h_90vh" id="main" x-data>
    <div class="container position-relative px-0 py-md-2 --mw-1170 --h_100">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap --h_100">
            <!-- CONTACTS BLOCK -->
            @livewire(
            'chat.last-users',
                [
                    'lastChatUsers' => $lastChatUsers,
                    'activeUserId' => $lastChatRecipientUserId,
                    'curUserId' => $curUserId,
                    'chanId' => $chanId
                ])
            <!-- CHAT BLOCK -->
            @livewire('chat.message-window', ['recipientUserId' => $lastChatRecipientUserId, 'chanId' => $chanId])
        </div>
    </div>
    <script>
        const scrollDownChatWindow = () => {
            let scrolledEl = document.querySelector('.messages_container');
            const sHeight = scrolledEl.scrollHeight;

            scrolledEl.scroll({
                top: sHeight,
                left: 0,
                behavior: 'smooth'
            });
        };
        // setInterval(scrollDownChatWindow, 1000);

        document.addEventListener('alpine:init', () => {
            Alpine.store('typing', false);
            Alpine.store('activePeer', '');
            Alpine.store('activePeerId', false);
        });

        document.addEventListener('livewire:init', function() {
            scrollDownChatWindow();
            Livewire.hook('message.processed', (msg, component) => {
                scrollDownChatWindow();
            });

            window.addEventListener('userEchoReloaded', event => {
                chanId = event.detail.chanId;
                console.log('new chanId is ' + chanId);

                window.Echo
                    .private("direct-chat." + chanId)
                    .listen("ChatMessageUpdated", (e) => {
                        console.log("message updated");
                        console.log(e);
                    }).listenForWhisper('typing', console.log);
            });

            window.addEventListener('typing', event => {
                chanId = event.detail.chanId;
                activePeer = event.detail.activePeer;
                activePeerName = event.detail.activePeerName;

                window.Echo
                    .private('direct-chat.' + chanId)
                    .whisper(
                        "typing", {
                            activePeer,
                            activePeerName
                        }
                    );
            });

            let typingTimeer = false;

            window.Echo
                .private("direct-chat.{{ $chanId }}")
                .listenForWhisper(
                    'typing',
                    (e) => {
                        Alpine.store('typing', true);
                        Alpine.store('activePeer', e.activePeerName);
                        Alpine.store('activePeerId', e.activePeer);

                        if (typingTimeer) clearTimeout(typingTimeer);

                        typingTimeer = setTimeout(() => {
                            Alpine.store('typing', false);
                        }, 3000);
                    }
                );
        });
    </script>
</section>
@endsection