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

class AppHeader 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 = 'header';

		const logo = document.createElement('img');
		logo.src = '/res/logo.png';
		logo.alt = 'logo';
		logo.className = 'header_icon';
		logo.onclick = () => {
			window.location = '/';
		};
		div.appendChild(logo);

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

			if(window.location.pathname == item.to){
				menuItem.classList.add('header_item_active');
			}

			div.appendChild(menuItem);
		})

		root.appendChild(div);
	}

	getMenuItems() {
		return [
		{name:'Firma', to: '/about'},
		{name: 'Servicii', to: '/services'},
		{name: 'Prețuri', to: '/prices'},
		{name: 'Contact', to: '/contact'}
	];
	} 
}

customElements.define('app-header', AppHeader);
