(() => {
    const initUserInterface = () => {
        const gcMainContentElement = document.querySelector('.gc-main-content');

        gcMainContentElement.classList.remove('gc-user-admin');
        gcMainContentElement.classList.add('gc-user-user');
    };

    // initUserInterface();

    const getAccessTraining = (accessTrainings) => {
        const arr = accessTrainings;

        const path = location.pathname;

        for (const id of arr) {
            if (path.indexOf(id) !== - 1) {
                return true;
            }

            if (document.querySelector('.breadcrumbs')) {
                const breadcrumbsItems = document.querySelectorAll('.breadcrumbs a');

                for (const item of breadcrumbsItems) {
                    if (item.href.indexOf(id) !== -1) {
                        return true;
                    }
                }
            }

            if (document.querySelector('.breadcrumb')) {
                const breadcrumbsItems = document.querySelectorAll('.breadcrumb a');

                for (const item of breadcrumbsItems) {
                    if (item.href.indexOf(id) !== -1) {
                        return true;
                    }
                }
            }
        }
    };

    const createStyleMainMenuTemplate = () => {
        return (
            `<style>
                :root {
                    --font-family-exo: "Exo 2", sans-serif;
                }

                html {
                    font-size: calc(1vw / 19.2);
                }

                #gcAccountUserMenu .gc-account-leftbar,
                .cst-lk-menu-wrapper {
                    display: none !important;
                }

                .main-lk-menu {
                    position: fixed;
                    left: 40rem;
                    top: 30rem;
                    width: 274rem;
                    height: calc(100% - 60rem);
                    z-index: 1000;

                    display: flex;
                    flex-direction: column;
                }

                .gc-main-content.with-left-menu {
                    margin-left: 360rem !important;
                }

                .main-lk-menu__header {
                    display: flex;
                    align-content: center;
                    justify-content: center;
                    padding: 0 30rem;
                }

                .main-lk-menu__header-logo {
                    width: 147rem;
                }

                .main-lk-menu__header-logo-img {
                    display: block;
                    max-width: 100%;
                    height: auto;
                }

                .main-lk-menu__header-toggle {
                    display: none;
                }

                .main-lk-menu__header-toggle-btn {}

                .main-lk-menu__content {
                    margin-top: 25rem;
                }

                .main-lk-menu-profile-wrapper {}

                .main-lk-menu-profile {
                    background: #fff;
                    border-radius: 10rem;
                }

                .main-lk-menu-profile__header {
                    border-radius: 10rem;
                    padding: 10rem 12rem;
                    box-shadow: 0 0 10rem 0 rgba(0, 0, 0, 0.09);
                    background: #fff;


                    display: grid;
                    grid-template-columns: 40rem 190rem;
                    gap: 0 20rem;
                }

                .main-lk-menu-profile__img-box {
                    width: 40rem;
                    height: 40rem;
                    border-radius: 50%;
                }

                .main-lk-menu-profile__img-item {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                    border-radius: 50%;
                }

                .main-lk-menu-profile__username {
                    font-family: var(--font-family-exo);
                    font-weight: 500;
                    font-size: 15rem;
                    line-height: 1.1 !important;
                    color: #444 !important;
                    margin-bottom: 0 !important;

                    display: flex;
                    align-items: center;
                }

                .main-lk-menu-profile__links {
                    padding: 13rem 18rem;

                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-start;
                }

                .main-lk-menu-profile__links-item {
                    font-family: var(--font-family-exo);
                    font-weight: 400;
                    font-size: 15rem;
                    line-height: 1.1 !important;
                    color: #444 !important;
                    margin-bottom: 7rem !important;
                }

                .main-lk-menu-profile__links-item:last-child {
                    margin-bottom: 0 !important;
                }

                .main-lk-menu-inner {
                    margin-top: 10rem;

                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 10rem 0;
                }

                .main-lk-menu-link {
                    background: #fff;
                    border-radius: 10rem;
                    padding: 10rem 20rem 12rem 18rem;
                    text-decoration: none !important;
                    transition: all .3s;
                }

                .main-lk-menu-link:hover {
                    opacity: .9;
                    box-shadow: 0 0 10rem 0 rgba(0, 0, 0, 0.09);
                }

                .main-lk-menu-link--trainings {
                    background-image: url('//fs23.getcourse.ru/fileservice/file/download/a/298472/sc/240/h/df18bafdc16f34dc66f48233c145283b.png');
                    background-repeat: no-repeat;
                    background-size: 21rem 21rem;
                    background-position: 15rem center;
                }

                .main-lk-menu-link--tiara {
                    background-image: url('//fs17.getcourse.ru/fileservice/file/download/a/298472/sc/273/h/f34506ecf3996baa9fe881d7ef97457a.png');
                    background-repeat: no-repeat;
                    background-size: 21rem 21rem;
                    background-position: 15rem center;
                }

                .main-lk-menu-link--pay {
                    background-image: url('//fs20.getcourse.ru/fileservice/file/download/a/298472/sc/58/h/2265a4c078d99e3f382eee8b24430616.png');
                    background-repeat: no-repeat;
                    background-size: 21rem 21rem;
                    background-position: 15rem center;
                }

                .main-lk-menu-link--partner {
                    background-image: url('//fs22.getcourse.ru/fileservice/file/download/a/298472/sc/280/h/71d16fe0eea432ab42a72ba49e1e39e7.png');
                    background-repeat: no-repeat;
                    background-size: 21rem 21rem;
                    background-position: 15rem center;
                }

                .main-lk-menu-link--chatium {
                    background-image: url('//fs24.getcourse.ru/fileservice/file/download/a/298472/sc/229/h/9327c0a830ef4520059fb2b6bbcb7d3d.png');
                    background-repeat: no-repeat;
                    background-size: 21rem 21rem;
                    background-position: 15rem center;
                }

                .main-lk-menu-link-toggle-item {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-start;

                    position: relative;
                }

                .main-lk-menu-link__toggle-btn {
                    position: absolute;
                    right: 13rem;
                    top: 15rem;
                }

                .main-lk-menu-link__toggle-btn-item {
                    display: block;
                    width: 14rem;
                    height: 7rem;
                    margin: 0;
                    background: transparent url('//fs22.getcourse.ru/fileservice/file/download/a/298472/sc/311/h/614c72dbfb26a788ce3b9c997afc945d.png') no-repeat;
                    background-size: contain;
                    transform: rotate(180deg);
                    border: none;
                    font-size: 0;
                    line-height: 0;
                }

                .main-lk-menu-link-toggle-item--active .main-lk-menu-link__toggle-btn-item {
                    transform: rotate(0);
                }

                .main-lk-menu-link__title {
                    display: block;
                    padding-left: 37rem;

                    font-family: var(--font-family-exo);
                    font-weight: 500;
                    font-size: 15rem;
                    line-height: 1.1 !important;
                    color: #444 !important;
                }

                .main-lk-menu-link-toggle-item .main-lk-menu-link__text {
                    font-family: var(--font-family-exo);
                    font-weight: 700;
                    font-size: 15rem;
                    line-height: 1.1 !important;
                    color: #444 !important;
                    display: block;
                    margin-bottom: 7rem;
                }

                .main-lk-menu-link__list {
                    padding: 0;
                    margin: 0;
                    list-style: none;

                    margin-top: 13rem;
                }

                .main-lk-menu-link-toggle-item .main-lk-menu-link__text,
                .main-lk-menu-link-toggle-item .main-lk-menu-link__list {
                    display: none;
                }

                .main-lk-menu-link-toggle-item--active .main-lk-menu-link__text,
                .main-lk-menu-link-toggle-item--active .main-lk-menu-link__list {
                    display: block;
                }

                .main-lk-menu-link__list-item {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-start;

                    padding: 0;
                    margin: 0;
                    list-style: none;
                }

                .main-lk-menu-link__list-item-link {
                    font-family: var(--font-family-exo);
                    font-weight: 400;
                    font-size: 15rem;
                    line-height: 1.1 !important;
                    color: #444 !important;

                    margin-bottom: 7rem;
                }

                .main-lk-menu-link__list-item-link:last-child {
                    margin-bottom: 0;
                }

                .main-lk-menu__footer {
                    margin-top: auto;

                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 28rem;
                }

                .main-lk-menu__footer-link {
                    text-decoration: none !important;
                    font-size: 0 !important;
                    line-height: 0 !important;
                    width: 33rem;
                    height: 33rem;

                    background-size: contain;
                    background-repeat: no-repeat;
                    border-radius: 50%;
                }

                .main-lk-menu__footer-link--inst {
                    background-image: url('//fs02.getcourse.ru/fileservice/file/download/a/298472/sc/142/h/77c1402508a39b2240ff76b8bde6cd43.png');
                }

                .main-lk-menu__footer-link--fb {
                    background-image: url('//fs19.getcourse.ru/fileservice/file/download/a/298472/sc/48/h/6132f64079a0411d94b58db096c9b63a.png');
                }

                .main-lk-menu__footer-link--yt {
                    background-image: url('//fs22.getcourse.ru/fileservice/file/download/a/298472/sc/506/h/39522b61e27fc2b33445c9165c016f51.png');
                }

                .body--o-hidden {
                    overflow: hidden !important;
                }

                @media screen and (max-width: 768px) {
                    html {
                        font-size: calc(1vw / 4.14);
                    }

                    .body--pt-80 {
                        padding-top: 80rem !important;
                    }

                    .gc-main-content.with-left-menu {
                        margin-left: 0 !important;
                    }

                    #gcAccountUserMenu .gc-account-leftbar,
                    .cst-lk-menu-wrapper {
                        display: none !important;
                    }

                    .main-lk-menu {
                        position: fixed;
                        left: 0;
                        top: 0;
                        width: 100%;
                        z-index: 1000;
                        padding: 0;
                        height: auto;
                    }

                    .main-lk-menu--open {
                        height: 100%;
                        padding: 0 0 100rem;
                        overflow-x: auto;
                        background: #f5f1eb;
                    }

                    .main-lk-menu__header {
                        display: flex;
                        align-content: center;
                        justify-content: space-between;
                        padding: 15rem 40rem;
                        box-shadow: 0 0 2rem 0 #c7c7c7;

                        background: #fff;
                    }

                    .main-lk-menu__header-logo {
                        width: 112rem;
                    }

                    .main-lk-menu__header-logo-img {
                        display: block;
                        max-width: 100%;
                        height: auto;
                    }

                    .main-lk-menu__header-toggle {
                        display: flex;
                        align-items: center;
                    }

                    .main-lk-menu__header-toggle-btn {
                        display: block;
                        width: 25rem;
                        height: 14rem;
                        font-size: 0;
                        line-height: 0;
                        border: none;

                        background: url('//fs01.getcourse.ru/fileservice/file/download/a/298472/sc/249/h/0b865c4d4de463f0ff57e327cc5b962b.png') no-repeat;
                        background-size: contain;
                        background-position: center;
                    }

                    .main-lk-menu--open .main-lk-menu__header-toggle-btn {
                        background-image: url('//fs18.getcourse.ru/fileservice/file/download/a/298472/sc/387/h/abb98bb4f3e06876bcc29ae343a8cfe2.png');
                    }

                    .main-lk-menu__content {
                        margin-top: 25rem;

                        display: none;
                    }

                    .main-lk-menu--open .main-lk-menu__content {
                        display: block;
                    }

                    .main-lk-menu-profile-wrapper {
                        padding: 0 40rem;
                    }

                    .main-lk-menu-inner {
                        padding: 0 40rem;
                    }

                    .main-lk-menu-link-toggle-item .main-lk-menu-link__text,
                    .main-lk-menu-link-toggle-item .main-lk-menu-link__list {
                        display: none;
                    }

                    .main-lk-menu-link-toggle-item--active .main-lk-menu-link__text,
                    .main-lk-menu-link-toggle-item--active .main-lk-menu-link__list {
                        display: block;
                    }

                    .main-lk-menu__footer {
                        margin-top: 20rem;
                        display: none;
                    }

                    .main-lk-menu--open .main-lk-menu__footer {
                        display: flex;
                    }
                }
            </style>`
        );
    };

    const createMainMenuTemplate = () => {
        const defaultMenuItemProfile = document.querySelector('.menu-item-profile .menu-item-icon');
        let defaultMenuItemProfileImage = '';

        if (defaultMenuItemProfile) {
            defaultMenuItemProfileImage = defaultMenuItemProfile.src;
        }

        return (
            `<section class="main-lk-menu  main-lk-menu">
                <div class="main-lk-menu__header">
                    <div class="main-lk-menu__header-logo">
                        <img class="main-lk-menu__header-logo-img"
                            src="//fs19.getcourse.ru/fileservice/file/download/a/298472/sc/248/h/92b7f5c496c0cb6c0f8c8b20af3f6636.png">
                    </div>

                    <div class="main-lk-menu__header-toggle">
                        <button class="main-lk-menu__header-toggle-btn">Open/Hide</button>
                    </div>
                </div>

                <div class="main-lk-menu__content">
                    <div class="main-lk-menu-profile-wrapper">
                        <div class="main-lk-menu-profile">
                            <div class="main-lk-menu-profile__header">
                                <div class="main-lk-menu-profile__img-box">
                                    <img class="main-lk-menu-profile__img-item" src="${defaultMenuItemProfileImage}">
                                </div>

                                <p class="main-lk-menu-profile__username">${window.accountSafeUserName}</p>
                            </div>

                            <div class="main-lk-menu-profile__links">
                                <a href="/profile" class="main-lk-menu-profile__links-item">Профиль</a>
                                <a href="/user/my/changePassword" class="main-lk-menu-profile__links-item">Сменить пароль</a>
                                <a href="/user/my/logout" class="main-lk-menu-profile__links-item">Выйти</a>
                            </div>
                        </div>
                    </div>

                    <div class="main-lk-menu-inner">
                        <div
                            class="main-lk-menu-link  main-lk-menu-link-toggle-item  main-lk-menu-link-toggle-item--active  main-lk-menu-link--trainings" style="display: none !important">
                            <span class="main-lk-menu-link__title">Обучение</span>

                            <ul class="main-lk-menu-link__list">
                                <span class="main-lk-menu-link__text">Все доступные тренинги:</span>

                                <li class="main-lk-menu-link__list-item">
                                    <a href=""
                                        class="main-lk-menu-link__list-item-link"></a>
                                </li>
                            </ul>

                            <div class="main-lk-menu-link__toggle-btn">
                                <button class="main-lk-menu-link__toggle-btn-item">Up/Down</button>
                            </div>
                        </div>

                        <a href="/teach/control/stream" class="main-lk-menu-link  main-lk-menu-link--trainings">
                            <span class="main-lk-menu-link__title">Обучение</span>
                        </a>

                        <a href="/tlgrm" class="main-lk-menu-link  main-lk-menu-link--tiara"
                            target="_blank">
                            <span class="main-lk-menu-link__title">Тиара</span>
                        </a>

                        <a href="/sales/control/userProduct/my" class="main-lk-menu-link  main-lk-menu-link--pay">
                            <span class="main-lk-menu-link__title">Мои покупки</span>
                        </a>

                        <a href="/sales/control/participant/me/part/deals" class="main-lk-menu-link  main-lk-menu-link--partner">
                            <span class="main-lk-menu-link__title">Кабинет партнера</span>
                        </a>

                        <a href="/src/chatium1" class="main-lk-menu-link  main-lk-menu-link--chatium">
                            <span class="main-lk-menu-link__title">Chatium</span>
                        </a>
                    </div>
                </div>

                <div class="main-lk-menu__footer">
                    <a href="https://www.instagram.com/makpal_karibzhanova/"
                        class="main-lk-menu__footer-link  main-lk-menu__footer-link--inst" target="_blank">INST</a>
                    <a href="https://www.facebook.com/makpal.nurbaturova"
                        class="main-lk-menu__footer-link  main-lk-menu__footer-link--fb" target="_blank">FB</a>
                    <a href="https://youtube.com/@makpalkaribzhanova"
                        class="main-lk-menu__footer-link  main-lk-menu__footer-link--yt" target="_blank">YT</a>
                </div>
            </section>`
        );
    };

    const initSettingsMenu = () => {
        const body = document.body;
        const toggleButton = document.querySelector('.main-lk-menu__header-toggle-btn');

        toggleButton.addEventListener('click', () => {
            body.classList.toggle('body--o-hidden');

            const mainLkMenuElement = document.querySelector('.main-lk-menu');

            mainLkMenuElement.classList.toggle('main-lk-menu--open');
        });
    };

    const initMainMenuComponent = () => {
        const body = document.body;

        body.insertAdjacentHTML('beforeend', createStyleMainMenuTemplate());

        body.classList.toggle('body--pt-80');

        body.insertAdjacentHTML('beforeend', createMainMenuTemplate());

        initSettingsMenu();
    };

    // const gcMainContentElement = document.querySelector('.gc-main-content');

    const accessTrainings = [923320485];

    // const isUser = gcMainContentElement.classList.contains('gc-user-user');
    const isUser = true;
    const isAccessTraining = getAccessTraining(accessTrainings);

    if (isUser && isAccessTraining) {
        let checkDEFAULTNav = setInterval(function () {
            if (document.querySelector('.gc-account-leftbar')) {
                initMainMenuComponent();
                clearInterval(checkDEFAULTNav);
            }
        }, 10);
    }
})();