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

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

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

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

		const div = document.createElement('div');
		div.className = 'menu';

		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);
	}

	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' }
		];
	}
}

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