import $ from 'jquery';

class Header {
	constructor(element) {
		this.$element = $(element);
		this.$burger = this.$element.find('.header__burger');
		this.$Nav = this.$element.find('.nav-main');
		this.$hasSub = this.$element.find('.menu-item-has-children');
		this.$menuArrow = this.$element.find('i.fa-angle-down');
		this.$menuBg = this.$element.find('.header__menu-bg');
		this.init();
	}

	dropDown() {
		let winW = $(window).width();
		if (winW < 991) {
			if (
				this.$element.find('.menu-item-has-children .fa-angle-down').length == 0
			) {
				this.$hasSub.prepend('<i class="fa fa-angle-down"></i>');
			}
		} else {
			this.$hasSub.children('.fa-angle-down').remove();
		}
	}

	init() {
		$(document).ready(() => {
			this.dropDown();
		});

		$(document).on(
			'click',
			'.menu-item-has-children .fa-angle-down',
			function () {
				$(this).parent().toggleClass('active');
				$(this).parent().children('a:first').toggleClass('active');
			},
		);

		$(window).resize(() => {
			this.dropDown();
		});

		$(window).scroll(function () {
			if ($(window).scrollTop() > 50) {
				$('.header').addClass('sticky');
			} else {
				$('.header').removeClass('sticky');
			}
		});

		this.$burger.click((e) => {
			e.preventDefault();
			if ($(e.currentTarget).hasClass('opened')) {
				$(e.currentTarget).removeClass('opened').attr('aria-expanded', 'false');
				this.$Nav.slideUp(300).parent().removeClass('active');
			} else {
				$(e.currentTarget).addClass('opened').attr('aria-expanded', 'true');
				this.$Nav.slideDown(300).parent().addClass('active');
			}
		});

		this.$menuBg.click((e) => {
			e.preventDefault();
			this.$burger.removeClass('opened').attr('aria-expanded', 'false');
			this.$Nav.slideUp(300).parent().removeClass('active');
		});

		$(document).on('click', '.fa-angle-down', function (e) {
			e.preventDefault();
			if ($(this).hasClass('active')) {
				$(this).removeClass('active');
				$(this).parent('li').children('.sub-menu').removeClass('active');
			} else {
				$(this).addClass('active');
				$(this).parent('li').children('.sub-menu').addClass('active');
			}
		});
	}
}

$('[data-header]').each((index, element) => new Header(element));