import { waitForElement } from "../scripts/waitForElement.js";


(() => {
    console.log('Loading compact view components...');

    waitForElement('[class*="rootmenu_RootMenuBar_"][class*="steamdesktop_RootMenuBar_"]').then(async (_, element) => {

        const parent = document.querySelector('[class*="rootmenu_RootMenuBar_"][class*="steamdesktop_RootMenuBar_"]');
        parent.append(...document.querySelector('[class*="supernav_SuperNav_"]').children);

        parent.insertAdjacentHTML('afterbegin', `
        <div title="Go back" class="button" id="back">
            <div class="icon">
                <!---->
            </div>
        </div>
        `);

        document.querySelector('#back').addEventListener('click', () => {
            window.opener.MainWindowBrowserManager.m_history.goBack()
        })

        document.querySelector('.supernav_MenuButton_19axK, .supernav_MenuButton_19axK span')
            .style.fontFamily = '"Segoe UI Variable Text", "Segoe UI" !important';


        document.querySelector('[class*="steamdesktop_Wrapper_"] [class*="titlebarcontrols_TitleBarControls_"]').insertAdjacentHTML('afterbegin', `
            <div class="titlebarcontrols_Button_2Szzh downloadsButton" id="downloads">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="none" class="titlebarcontrols_Icon_34bQc"></svg>
            </div>
            <div class="titlebarcontrols_Button_2Szzh friendsButton" id="friends">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="none" class="titlebarcontrols_Icon_34bQc"></svg>
            </div>
        `);

        const dowBut = document.querySelector("#downloads");
        dowBut.addEventListener("click", () => {
            window.opener.SteamUIStore.Navigate('/library/Downloads');
        })

        const friends = document.querySelector("#friends");
        friends.addEventListener("click", () => {
            window.opener.window.open('steam://open/friends/')
        })
    })

    waitForElement('div#sidebar').then(async (_, element) => {
        document.querySelector('div#sidebar').remove();
    })
    waitForElement('.activeIndicator').then(async (_, element) => {
        document.querySelector('.activeIndicator').remove();
    })
})()