'use strict';

const Tab = require(__dirname + '/../components/tab.js');

class FunctionalTab extends Tab {
	template() {
		return `<div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
					<div class="server-tab-badge close-button">
						<i class="material-icons">close</i>
					</div>
					<div class="server-tab">
						<i class="material-icons">${this.props.materialIcon}</i>
					</div>
				</div>`;
	}

	init() {
		this.$el = this.generateNodeFromTemplate(this.template());
		if (this.props.name !== 'Settings') {
			this.props.$root.appendChild(this.$el);
			this.$closeButton = this.$el.getElementsByClassName('server-tab-badge')[0];
			this.registerListeners();
		}
	}

	registerListeners() {
		super.registerListeners();

		this.$el.addEventListener('mouseover', () => {
			this.$closeButton.classList.add('active');
		});

		this.$el.addEventListener('mouseout', () => {
			this.$closeButton.classList.remove('active');
		});

		this.$closeButton.addEventListener('click', e => {
			this.props.onDestroy();
			e.stopPropagation();
		});
	}
}

module.exports = FunctionalTab;