import Component from '../component/index';
import routeService from '../../services/RouteService';

import './MainMenu.css';
import {EVENTS} from '../../consts';
import tokenApi from '../../api/TokenAPI';

export const NAV_MENU = [
    {
        title: 'Главная',
        url: '/',
    },
    {
        title: 'Список хранилищ',
        url: '/api',
    },
    {
        title: 'Журнал',
        url: '/logs',
    },
    {
        title: 'Личный кабинет',
        url: '/profile',
        className: 'MainMenu__profileButton'
    },
];

class MainMenu extends Component {
    menuItems = [];

    constructor () {
        super('#main-menu', document.body);

        this.buttonsContainer = this.mainNode.querySelector('.navbar-nav');
        this.logoBox = this.mainNode.querySelector('.MainMenu__logoBox');
        this.avatar = this.mainNode.querySelector('.MainMenu__avatar');
        this.exitButton = this.mainNode.querySelector('.MainMenu__exitButton');

        this.addEventListener(this.exitButton, 'click', this.exitApp);

        this.addEventListener(this.logoBox, 'click', () => {
            routeService.goTo('/');
        });

        this.addEventListener(this.avatar, 'click', () => {
            routeService.goTo('/profile');
        });

        this.addSubscribe(routeService, EVENTS.ROUTE_CHANGE, (route) => {
            this.menuItems.forEach(({url, link}) => {
                if (route.url === url) {
                    link.classList.add('active');
                } else {
                    link.classList.remove('active');
                }
            });
        });
    }

    exitApp = () => {
        tokenApi.clearTokents();
        location.reload();
    }

    setAvatar = (url) => {
        this.avatar.style.backgroundImage = `url('${url}')`;
    }

    render = () => {
        this.menuItems = NAV_MENU.map(({url, title, className = ''}) => {
            const li = this.createElement({
                tagName: 'li',
                parentNode: this.buttonsContainer,
                options: {
                    className: `nav-item ${className}`,
                },
                args: {
                    'data-toggle': 'collapse',
                    'data-target': '#navbarNavDropdown',
                }
            });
            const link = this.createElement({
                tagName: 'a',
                parentNode: li,
                options: {
                    className: 'nav-link',
                    textContent: title,
                },
            });
            this.addEventListener(li, 'click', () => {
                routeService.goTo(url);
            });

            return {url, link};
        });
    }

    isHide = () => {
        return this.mainNode.parentNode;
    }

    hideMenu = () => {
        this.mainNode.remove();
    }

    showMenu = () => {
        document.body.prepend(this.mainNode);
    }
}

export default MainMenu;