import { Component } from '@angular/core';
import { NativeInputComponent } from '../../_abstract/native-input.component';
import { Router, ActivatedRoute } from '@angular/router';
import { IOption, ILink } from '../../../models/field.model';

@Component({
	selector: 'app-select',
	templateUrl: './select.component.html',
	styleUrls: ['./select.component.scss']
})
export class SelectComponent extends NativeInputComponent {

	exposeMetaInTemplate: string[] = ['options', 'link'];

	options: IOption[];
	link: ILink;
	
	constructor(private router: Router, private route: ActivatedRoute) {
		super();
	}
	
	navigate(field: HTMLSelectElement) {
		const base = Array.isArray(this.meta.link.route) ? this.meta.link.route : [this.meta.link.route];
		const destination = [...base, field.options[field.selectedIndex].value];
		this.router.navigate(destination, { relativeTo: this.route });
	}

}