import styles from '!raw-loader!sass-loader!./styles/app-service-menu.scss';

class AppServiceMenu extends HTMLElement {
	constructor() {
		super();
	}

	connectedCallback() {
		const root = this.attachShadow({ mode: 'open' });

		const style = document.createElement('style');
		style.textContent = styles;
		root.appendChild(style);

		const hamburger = document.createElement('div');
		hamburger.className = 'menu_hamburger';
		root.appendChild(hamburger);

		const div = document.createElement('div');
		div.className = 'menu';
		if (this.dataset.embedded) {
			div.classList.add('menu_asChild');
		}

		const closeButton = document.createElement('div');
		closeButton.className = 'menu_closeMenu';
		div.appendChild(closeButton);

		this.getMenuItems().forEach(item => {
			const menuItem = document.createElement('div');
			menuItem.className = 'menu_item';
			menuItem.onclick = () => {
				window.location.href = item.to;
			};

			const img = document.createElement('img');
			img.className = 'menu_item_image';
			img.src = item.img;
			img.alt = item.name;
			menuItem.appendChild(img);

			const text = document.createElement('span');
			text.className = 'menu_item_text';
			text.innerText = item.name;
			menuItem.appendChild(text);

			div.appendChild(menuItem);
		});

		root.appendChild(div);

		hamburger.onclick = () => {
			div.classList.add('menu_open');
			hamburger.classList.add('menu_hamburger_open');
		};

		closeButton.onclick = () => {
			div.classList.remove('menu_open');
			hamburger.classList.remove('menu_hamburger_open');
		};
	}

	getMenuItems() {
		return [
			{
				name: 'Servere virtuale',
				to: '/services/vps',
				img: '/res/menu_vps.png'
			},
			{
				name: 'Servere dedicate',
				to: '/services/dedicated',
				img: '/res/menu_dedicated.png'
			},
			{ name: 'Kubernetes', to: '/services/k8', img: '/res/menu_k8.png' },
			{
				name: 'Software as a Service',
				to: '/services/saas',
				img: '/res/menu_saas.png'
			},
			{ name: 'Domenii', to: '/services/domain', img: '/res/menu_domain.png' }
		];
	}

	static get observedAttributes() {
		return ['data-embedded'];
	}
}

customElements.define('app-service-menu', AppServiceMenu);
