<link href="<?=$this->getModuleUrl('static/css/user.css') ?>" rel="stylesheet">
<link href="<?=$this->getModuleUrl('static/css/message.css') ?>" rel="stylesheet">

<div class="row">
    <div class="col-12 profile">
        <?php include APPLICATION_PATH . '/modules/user/views/panel/navi.php'; ?>
        <div class="profile-content active">
            <?php if ($this->getRequest()->getParam('showhidden') != 1) : ?>
                <h1><?=$this->getTrans('dialog') ?></h1>
            <?php else : ?>
                <h1><?=$this->getTrans('dialogHiddenDialogs') ?></h1>
            <?php endif; ?>
            <?=(($this->getRequest()->getParam('showhidden') != 1) && !empty($this->get('dialogsHidden'))) ? '<a href="' . $this->getUrl(['controller' => 'panel', 'action' => 'dialog', 'showhidden' => 1]) . '"><i class="fa-solid fa-eye-slash"></i> ' . $this->getTrans('dialogsHidden') . '</a>' : '' ?>
            <div id="uMessenger">
                <div class="chat">
                    <div class="row chat-wrapper">
                        <div class="col-12 col-md-5 col-xl-4<?=$this->get('dialog') ? ' hidden-list-message' : '' ?>">
                            <div class="chat-list-info">
                                <span class="avatar">
                                    <img src="<?=$this->getUrl() . '/' . $this->getUser()->getAvatar() ?>" class="rounded-circle" alt="<?=$this->escape($this->getUser()->getName()) ?>" title="<?=$this->escape($this->getUser()->getName()) ?>">
                                </span>
                            </div>
                            <div class="slimScrollDiv chat-list-scroll<?=$this->get('dialog') ? '' : ' noscroll' ?>">
                                <div class="chat-list-wrapper">
                                    <ul class="chat-list">
                                        <?php if ($this->get('dialogs') != ''): ?>
                                            <?php foreach ($this->get('dialogs') as $dialog): ?>
                                                <?php
                                                $date = new \Ilch\Date($dialog->getTime());

                                                if ($dialog->getRead() != '' && $dialog->getCId() == $this->getRequest()->getParam('id')) {
                                                    $class = 'new active';
                                                } elseif ($dialog->getRead() != '') {
                                                    $class = 'new';
                                                } elseif ($dialog->getCId() == $this->getRequest()->getParam('id')) {
                                                    $class = 'active';
                                                } else {
                                                    $class = '';
                                                }
                                                ?>
                                                <li class="<?=$class ?>">
                                                    <a href="<?=$this->getUrl(['controller' => 'panel', 'action' => 'dialog', 'id' => $dialog->getCId()]) ?>" class="dialog-link">
                                                        <span class="avatar">
                                                            <img src="<?=$this->getUrl() . '/' . $dialog->getAvatar() ?>" class="rounded-circle" alt="<?=$this->escape($dialog->getName()) ?>" title="<?=$this->escape($dialog->getName()) ?>">
                                                        </span>
                                                        <div class="body">
                                                            <div class="header">
                                                                <span class="username"><?=$this->escape($dialog->getName()) ?></span>
                                                                <small class="timestamp text-muted">
                                                                    <?php
                                                                    if (strtotime($date) <= strtotime('-7 day')) {
                                                                        echo $date->format('d.m.Y', true);
                                                                    } elseif (strtotime($date) <= strtotime('-2 day') && strtotime($date) >= strtotime('-6 day')) {
                                                                        echo $this->getTrans($date->format('l', true));
                                                                    } elseif (strtotime($date) <= strtotime('-1 day')) {
                                                                        echo $this->getTrans('profileYesterday') . ' ' . $date->format('H:i', true);
                                                                    } else {
                                                                        echo $date->format('H:i', true);
                                                                    }
                                                                    ?>
                                                                </small>
                                                            </div>
                                                            <p>
                                                                <?=$this->alwaysPurify($dialog->getText()) ?>
                                                            </p>
                                                        </div>
                                                    </a>
                                                    <?php if ($this->getRequest()->getParam('showhidden') == 1) : ?>
                                                        <a href="<?=$this->getUrl(['controller' => 'panel', 'action' => 'unhidedialog', 'id' => $dialog->getCId()], null, true) ?>" title="<?=$this->getTrans('unhideDialog') ?>" class="hide_button"><span class="fa-solid fa-eye"></span></a>
                                                    <?php else : ?>
                                                        <a href="<?=$this->getUrl(['controller' => 'panel', 'action' => 'hidedialog', 'id' => $dialog->getCId()], null, true) ?>" title="<?=$this->getTrans('hideDialog') ?>" class="hide_button"><span class="fa-solid fa-eye-slash"></span></a>
                                                    <?php endif; ?>
                                                    <?=$this->getDeleteIcon(['action' => 'deletedialog', 'id' => $dialog->getCId()]) ?>
                                                </li>
                                            <?php endforeach; ?>
                                        <?php else: ?>
                                            <div class="no-dialog">
                                                <?=$this->getTrans('noDialog') ?>
                                            </div>
                                        <?php endif; ?>
                                    </ul>
                                </div>
                                <div class="slimScrollBar" style="width: 7px; position: absolute; top: 0; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 100%; background: rgb(0, 0, 0);"></div>
                                <div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div>
                            </div>
                        </div>

                        <div class="col-12 col-md-7 col-xl-8 right-column<?=$this->get('dialog') ? '' : ' hidden-list-message' ?>">
                            <?php if ($this->get('dialog')): ?>
                                <div class="message-info">
                                    <span class="back-chat-list">
                                        <a href="<?=$this->getUrl(['controller' => 'panel', 'action' => 'dialog']) ?>">
                                            <i class="fa-solid fa-chevron-left"></i>
                                        </a>
                                    </span>
                                    <span class="avatar">
                                        <img src="<?=$this->getUrl() . '/' . $this->get('dialog')->getAvatar() ?>" class="rounded-circle" alt="<?=$this->escape($this->get('dialog')->getName()) ?>" title="<?=$this->escape($this->get('dialog')->getName()) ?>">
                                    </span>
                                    <span class="username">
                                        <?=$this->escape($this->get('dialog')->getName()) ?>
                                    </span>
                                </div>
                            <?php endif; ?>
                            <div class="slimScrollDiv message-list-scroll<?=$this->get('dialog') ? ' noscroll' : '' ?>">
                                <div class="message-list-wrapper" style="overflow: hidden; width: auto; height: 100%;">
                                    <ul class="message-list">
                                        <?php if ($this->get('dialog') != ''): ?>
                                            <div class="message_box"></div>
                                        <?php else: ?>
                                            <div class="no-dialog"><?=$this->getTrans('selectDialog') ?></div>
                                        <?php endif; ?>
                                    </ul>
                                </div>
                                <div class="slimScrollBar" style="width: 7px; position: absolute; top: 265px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 187.092px; background: rgb(0, 0, 0);"></div>
                                <div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div>
                            </div>

                            <?php if ($this->get('dialog')): ?>
                                <div class="compose-box">
                                    <div class="row">
                                        <div class="col-12 chat-textarea<?=(empty($this->get('dialog')->getId())) ? ' disabled' : '' ?>">
                                            <?=$this->getTokenField() ?>
                                            <textarea class="form-control input-sm ckeditor"
                                                      id="ck_1"
                                                      name="dialog_message"
                                                      toolbar="ilch_html_frontend"<?=(empty($this->get('dialog')->getId())) ? ' disabled' : '' ?>></textarea>
                                            <button class="btn btn-primary btn-sm float-end" id="chatSendBtn" style="z-index: 11">
                                                <i class="fa-solid fa-location-arrow"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?=$this->getDialog('mediaModal', $this->getTrans('media'), '<iframe style="border:0;"></iframe>') ?>
<script src="<?=$this->getModuleUrl('static/js/jquery.nicescroll.min.js') ?>"></script>
<script>
    let urlPathArray = window.location.pathname.split('/');

    if (urlPathArray[urlPathArray.length - 2] === 'id' && Number.isInteger(parseInt(urlPathArray[urlPathArray.length - 1]))) {
        const normalPollingRate = 3000, lowActivityPollingRate = 10000, lowActivityTreshold = 20;
        let old_data = '';

        $( window ).on( "load", function() {
            $(document).ready(function() {
                let token = document.body.querySelector('[name="ilch_token"]').value;
                let id = urlPathArray[urlPathArray.length - 1];
                let load_data = {'fetch':1, 'ilch_token':token};
                let hidden, visibilityChange;
                let getMessageTimer = null;
                let counterNothingNew = 0;

                $(function() {
                    $(".chat-list-wrapper, .message-list-wrapper").niceScroll();
                });

                $(".chat-list-wrapper, .message-list-wrapper").mouseover(function() {
                    $(".chat-list-wrapper, .message-list-wrapper").getNiceScroll().resize();
                });

                $("ul.chat-list li").click(function() {
                    location.href = $(this).find("a.dialog-link").attr("href");
                });

                $('ul.chat-list li .delete_button').click(function(event) {
                    if (!confirm(<?=json_encode($this->getTrans('deleteDialogConfirm')) ?>)) {
                        event.preventDefault();
                    }
                });

                // Get the editor instance from the editable element.
                let editorInstance = document.querySelector( '.ck-editor__editable' ).ckeditorInstance;

                editorInstance.model.document.on('change:data',function() {
                    if (editorInstance.getData().trim() === '') {
                        $(".chat-textarea").find('#chatSendBtn').hide();
                    } else {
                        $(".chat-textarea").find('#chatSendBtn').show();
                    }
                });

                function getNewMessages() {
                    $.post('<?=$this->getUrl('user/panel/dialogmessage/id/') ?>' + id, load_data,
                        function(data) {
                            if (old_data !== data) {
                                $('.message_box').html(data);
                                counterNothingNew = 0;
                            } else {
                                counterNothingNew += 1;
                            }
                            old_data = data;
                        });

                    if (document[hidden]) {
                        clearTimeout(getMessageTimer);
                    } else if (counterNothingNew >= lowActivityTreshold) {
                        // Switches to the lower polling rate if chat seems inactive for ~(normalPollingRate * lowActivityTreshold) ms.
                        getMessageTimer = window.setTimeout(getNewMessages, lowActivityPollingRate);
                    } else {
                        getMessageTimer = window.setTimeout(getNewMessages, normalPollingRate);
                    }
                }

                getMessageTimer = window.setTimeout(getNewMessages, normalPollingRate);

                // Set the name of the hidden property and the change event for visibility
                if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
                    hidden = "hidden";
                    visibilityChange = "visibilitychange";
                } else if (typeof document.msHidden !== "undefined") {
                    hidden = "msHidden";
                    visibilityChange = "msvisibilitychange";
                } else if (typeof document.webkitHidden !== "undefined") {
                    hidden = "webkitHidden";
                    visibilityChange = "webkitvisibilitychange";
                }

                function handleVisibilityChange() {
                    if (document[hidden]) {
                        clearTimeout(getMessageTimer);
                    } else {
                        getNewMessages();
                    }
                }

                if (typeof document.addEventListener === "undefined" || hidden === undefined) {
                    // Browser doesn't support addEventListener or the Page Visibility API
                } else {
                    // Handle page visibility change
                    document.addEventListener(visibilityChange, handleVisibilityChange, false);
                }

                document.getElementById("chatSendBtn").onclick = function () {
                    let token = document.body.querySelector('[name="ilch_token"]').value;
                    let post_data = {'text':editorInstance.getData(), 'ilch_token':token};

                    $.post('<?=$this->getUrl('user/panel/dialog/id/') ?>' + id, post_data,
                        function() {
                            editorInstance.setData("");

                            let messageDiv = $('.message-list-wrapper');
                            messageDiv.scrollTop(messageDiv[0].scrollHeight - messageDiv[0].clientHeight);
                        }).fail(function(err) {

                        alert(err.statusText);
                    });
                };

                let varCounter = 0;
                let varName = function() {
                    if (varCounter <= 1) {
                        varCounter++;
                        let messageDiv = $('.message-list-wrapper');
                        messageDiv.scrollTop(messageDiv[0].scrollHeight - messageDiv[0].clientHeight);
                    } else {
                        clearInterval(varName);
                    }
                };

                setInterval(varName, 1000);
            });
        })
    }
</script>
