/* GETCOURSE — ANSWERS FEED / v0.1.6 */
(() => {
    'use strict';

    if (
        window.controllerId !== 'control/answers'
    ) {
        return;
    }

    document.documentElement.classList.add(
        'psych-answers-feed-preload'
    );

    let preloadReleased = false;

    function releasePreload() {
        if (preloadReleased) return;

        preloadReleased = true;

        window.requestAnimationFrame(() => {
            window.requestAnimationFrame(() => {
                document.documentElement.classList.remove(
                    'psych-answers-feed-preload'
                );
            });
        });
    }

    window.setTimeout(
        releasePreload,
        2500
    );

    const root = document.documentElement;
    const body = document.body;

    root.classList.add('psych-answers-feed');
    body?.classList.add('psych-answers-feed');

    const clean = value =>
        String(value || '')
            .replace(/\s+/g, ' ')
            .trim();

    function closeAllSelects(except = null) {
        document
            .querySelectorAll('.pa-select.is-open')
            .forEach(wrapper => {
                if (wrapper === except) return;

                wrapper.classList.remove('is-open');

                wrapper
                    .querySelector('.pa-select__trigger')
                    ?.setAttribute(
                        'aria-expanded',
                        'false'
                    );
            });
    }

    function syncCustomSelect(
        select,
        wrapper
    ) {
        const option =
            select.options[
                select.selectedIndex
            ];

        const value =
            clean(
                option?.textContent ||
                ''
            );

        const label =
            wrapper.querySelector(
                '.pa-select__value'
            );

        if (label) {
            label.textContent =
                value ||
                'Выберите';
        }

        wrapper
            .querySelectorAll(
                '.pa-select__option'
            )
            .forEach(button => {
                button.classList.toggle(
                    'is-selected',
                    button.dataset.value ===
                        select.value
                );

                button.setAttribute(
                    'aria-selected',
                    button.dataset.value ===
                        select.value
                        ? 'true'
                        : 'false'
                );
            });
    }

    function buildCustomSelect(select) {
        if (
            !select ||
            select.dataset.psychAnswersSelect ===
                'ready'
        ) {
            return;
        }

        select.dataset.psychAnswersSelect =
            'ready';

        const wrapper =
            document.createElement('div');

        wrapper.className =
            'pa-select';

        const trigger =
            document.createElement('button');

        trigger.type = 'button';
        trigger.className =
            'pa-select__trigger';
        trigger.setAttribute(
            'aria-haspopup',
            'listbox'
        );
        trigger.setAttribute(
            'aria-expanded',
            'false'
        );

        trigger.innerHTML = `
            <span class="pa-select__value"></span>
            <span
                class="pa-select__arrow"
                aria-hidden="true"
            >
                <svg
                    viewBox="0 0 16 16"
                    fill="none"
                >
                    <path
                        d="M4 6.25 8 10l4-3.75"
                        stroke="currentColor"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                </svg>
            </span>
        `;

        const menu =
            document.createElement('div');

        menu.className =
            'pa-select__menu';
        menu.setAttribute(
            'role',
            'listbox'
        );

        Array.from(select.options)
            .forEach(option => {
                const button =
                    document.createElement(
                        'button'
                    );

                button.type = 'button';
                button.className =
                    'pa-select__option';
                button.dataset.value =
                    option.value;
                button.setAttribute(
                    'role',
                    'option'
                );

                button.textContent =
                    clean(
                        option.textContent
                    );

                menu.appendChild(
                    button
                );
            });

        wrapper.append(
            trigger,
            menu
        );

        select.insertAdjacentElement(
            'afterend',
            wrapper
        );

        select.classList.add(
            'pa-native-select'
        );

        trigger.addEventListener(
            'click',
            event => {
                event.preventDefault();
                event.stopPropagation();

                const opening =
                    !wrapper.classList.contains(
                        'is-open'
                    );

                closeAllSelects(
                    wrapper
                );

                wrapper.classList.toggle(
                    'is-open',
                    opening
                );

                trigger.setAttribute(
                    'aria-expanded',
                    opening
                        ? 'true'
                        : 'false'
                );
            }
        );

        menu.addEventListener(
            'click',
            event => {
                const optionButton =
                    event.target.closest(
                        '.pa-select__option'
                    );

                if (!optionButton) return;

                event.preventDefault();
                event.stopPropagation();

                select.value =
                    optionButton.dataset.value;

                syncCustomSelect(
                    select,
                    wrapper
                );

                wrapper.classList.remove(
                    'is-open'
                );

                trigger.setAttribute(
                    'aria-expanded',
                    'false'
                );

                select.dispatchEvent(
                    new Event(
                        'change',
                        {
                            bubbles: true
                        }
                    )
                );
            }
        );

        select.addEventListener(
            'change',
            () =>
                syncCustomSelect(
                    select,
                    wrapper
                )
        );

        syncCustomSelect(
            select,
            wrapper
        );
    }

    function decorateFilter() {
        const form =
            document.querySelector(
                'form.answers-page-filter'
            );

        if (!form) return;

        form.classList.add(
            'pa-filter-panel'
        );

        form.querySelectorAll(
            '.dropdown-filter select'
        ).forEach(
            buildCustomSelect
        );

        const label =
            form.querySelector(
                'label:has(#filter_only_my_trainings)'
            );

        if (label) {
            label.classList.add(
                'pa-filter-check'
            );
        }

        const selection =
            Array.from(
                form.children
            ).find(el =>
                el.matches?.('div') &&
                clean(el.textContent)
                    .startsWith('В выборке:')
            );

        if (selection) {
            selection.classList.add(
                'pa-filter-count'
            );
        }

        const reset =
            form.querySelector(
                '.js__reset_form'
            )?.parentElement;

        if (reset) {
            reset.classList.add(
                'pa-filter-reset'
            );
        }
    }

    function decorateAnswers() {
        const answersColumn =
            document.querySelector(
                '.col-md-8.answers-list'
            );

        const mainRow =
            answersColumn?.closest(
                '.row'
            );

        if (mainRow) {
            document
                .querySelectorAll(
                    '.pa-layout'
                )
                .forEach(row => {
                    if (row !== mainRow) {
                        row.classList.remove(
                            'pa-layout'
                        );
                    }
                });

            mainRow.classList.add(
                'pa-layout'
            );

            const trainingColumn =
                mainRow.querySelector(
                    ':scope > .col-md-2.answers-page-filter'
                );

            const answersColumn =
                mainRow.querySelector(
                    ':scope > .col-md-8.answers-list'
                );

            const missionColumn =
                mainRow.querySelector(
                    ':scope > .col-md-2.view-lesson-mission'
                );

            trainingColumn?.classList.add(
                'pa-training-column'
            );

            answersColumn?.classList.add(
                'pa-answers-column'
            );

            missionColumn?.classList.add(
                'pa-mission-column'
            );
        }

        document
            .querySelectorAll(
                '.filter-block'
            )
            .forEach(el =>
                el.classList.add(
                    'pa-training-filter'
                )
            );

        document
            .querySelectorAll(
                '.answer_wrapper'
            )
            .forEach(answer => {
                answer.classList.add(
                    'pa-answer-card'
                );

                const statusLabel =
                    answer.querySelector(
                        '.answer-status-label'
                    );

                statusLabel?.classList.add(
                    'pa-answer-status'
                );

                const statusText =
                    clean(
                        statusLabel?.textContent
                    );

                const isRejected =
                    /(?:не\s*принят|не\s*зачт|отклон)/i
                        .test(statusText) ||
                    answer.classList.contains(
                        'status-declined'
                    ) ||
                    answer.classList.contains(
                        'status-not_accepted'
                    ) ||
                    answer.classList.contains(
                        'status-not-accepted'
                    );

                statusLabel?.classList.toggle(
                    'pa-answer-status--danger',
                    isRejected
                );

                answer
                    .querySelectorAll(
                        '.gc-comment'
                    )
                    .forEach(comment => {
                        comment.classList.add(
                            'pa-comment'
                        );

                        const commentBody =
                            comment.querySelector(
                                '.lesson-answer-comment, .comment'
                            );

                        commentBody?.classList.add(
                            'pa-comment__body'
                        );
                    });
            });
    }

    function decoratePage() {
        document
            .querySelector(
                '.page-header'
            )
            ?.classList.add(
                'pa-page-header'
            );

        document
            .querySelector(
                '.answers-page-filter-toggler'
            )
            ?.classList.add(
                'pa-filter-toggler'
            );

        decorateFilter();
        decorateAnswers();
    }

    document.addEventListener(
        'click',
        event => {
            if (
                !event.target.closest(
                    '.pa-select'
                )
            ) {
                closeAllSelects();
            }
        }
    );

    document.addEventListener(
        'keydown',
        event => {
            if (
                event.key === 'Escape'
            ) {
                closeAllSelects();
            }
        }
    );

    const observer =
        new MutationObserver(
            () => {
                decorateFilter();
                decorateAnswers();
            }
        );

    function init() {
        document.documentElement.classList.add(
            'psych-answers-feed'
        );

        document.body.classList.add(
            'psych-answers-feed'
        );

        decoratePage();

        observer.observe(
            document.body,
            {
                childList: true,
                subtree: true
            }
        );

        releasePreload();
    }

    if (
        document.readyState ===
        'loading'
    ) {
        document.addEventListener(
            'DOMContentLoaded',
            init,
            {
                once: true
            }
        );
    } else {
        init();
    }
})();