import Ember from 'ember';

const {
    Component,
    String: {htmlSafe},
    inject: {service},
    computed
} = Ember;

export default Component.extend({
    tagName: 'nav',
    classNames: ['gh-nav'],
    classNameBindings: ['open'],

    open: false,

    navMenuIcon: computed('ghostPaths.subdir', function () {
        let url = `${this.get('ghostPaths.subdir')}/ghost/img/ghosticon.jpg`;

        return htmlSafe(`background-image: url(${url})`);
    }),

    config: service(),
    session: service(),
    ghostPaths: service(),
    feature: service(),

    mouseEnter() {
        this.sendAction('onMouseEnter');
    },

    actions: {
        toggleAutoNav() {
            this.sendAction('toggleMaximise');
        },

        showMarkdownHelp() {
            this.sendAction('showMarkdownHelp');
        },

        closeMobileMenu() {
            this.sendAction('closeMobileMenu');
        },

        openAutoNav() {
            this.sendAction('openAutoNav');
        }
    }
});