const frappe = require('frappejs');

module.exports = class Navbar {
    constructor({brand_label = 'Home'} = {}) {
        Object.assign(this, arguments[0]);
        this.items = {};
        this.navbar = frappe.ui.add('div', 'navbar navbar-expand-md border-bottom navbar-dark bg-dark', document.querySelector('body'));

        this.brand = frappe.ui.add('a', 'navbar-brand', this.navbar, brand_label);
        this.brand.href = '#';

        this.toggler = frappe.ui.add('button', 'navbar-toggler', this.navbar);
        this.toggler.setAttribute('type', 'button');
        this.toggler.setAttribute('data-toggle', 'collapse');
        this.toggler.setAttribute('data-target', 'desk-navbar');
        this.toggler.innerHTML = `<span class="navbar-toggler-icon"></span>`;

        this.navbar_collapse = frappe.ui.add('div', 'collapse navbar-collapse', this.navbar);
        this.navbar_collapse.setAttribute('id', 'desk-navbar');

        this.nav = frappe.ui.add('ul', 'navbar-nav mr-auto', this.navbar_collapse);
    }

    addItem(label, route) {
        let item = frappe.ui.add('li', 'nav-item', this.nav);
        item.link = frappe.ui.add('a', 'nav-link', item, label);
        item.link.href = route;
        this.items[label] = item;
        return item;
    }

    add_dropdown(label) {

    }

    add_search() {
        let form = frappe.ui.add('form', 'form-inline my-2 my-md-0', this.nav);

    }
}