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

import './MainMenu.css';
import {createElement} from '../../utils/elementUtils';
import {EVENTS} from '../../consts';

export const NAV_MENU = [
    {
        title: 'Главная',
        url: '/'
    },
    {
        title: 'Список хранилищ',
        url: '/api'
    },
    {
        title: 'Журнал',
        url: '/logs'
    },
];

class MainMenu extends Component {
    menuItems = [];

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

        this.buttonsContainer = this.mainNode.querySelector('.navbar-nav');
        this.logoBox = this.mainNode.querySelector('.Logo__box');

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

        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');
                }
            });
        });
    }

    render = () => {
        this.menuItems = NAV_MENU.map(({url, title}) => {
            const li = createElement({
                tagName: 'li',
                parentNode: this.buttonsContainer,
                options: {
                    className: 'nav-item',
                },
            });
            const link = 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);
    }
}

const navMenuButtons = new MainMenu();

export default navMenuButtons;