import { Component, OnInit, Input, Output, SimpleChanges, OnChanges, EventEmitter } from '@angular/core';
import { LabelService } from 'src/app/core/services/label-service/label-service.service';
import { LoadingIndicatorService } from 'src/app/core/services/loading-indicator.service';
import { FilterToggleService } from 'src/app/core/services/filter-toggler/filter-toggle.service';
import { ConstantsService } from 'src/app/shared/constants/constants.service';

export interface SortData {
	systems: any;
	sortOptions: any;
	tableAvailable?: boolean;
}

@Component({
	selector: 'sort-options',
	templateUrl: './sort-options.component.html',
	styleUrls: ['./sort-options.component.scss']
})
export class SortOptionsComponent implements OnInit, OnChanges {

	@Input() data: SortData;
	@Input() viewOptions;	// If possible to switch between grid and list or table view. Input list of view options.
	@Input() useFilters = true;
	@Input() id: string;
	@Output() view: EventEmitter<string> = new EventEmitter<string>();

	viewMode: 'GRID' | 'LIST' | 'TABLE';

	sortMode: string;
	displayedSorts = [];

	unitMode: string;

	// Labels
	filterLabel: string;
	sortByLabel: string;

	constructor(
		private labelService: LabelService,
		private loadingService: LoadingIndicatorService,
		private filterToggleService: FilterToggleService,
		private constants: ConstantsService
	) {}

	ngOnInit() {
		this.labelService.getLabel('filterSortingMobile').then(res => this.filterLabel = res );
		this.labelService.getLabel('filterSorting').then(res => this.sortByLabel = res );
		this.viewMode = this.viewOptions ? this.viewOptions[0] : 'GRID';

		const preferedUnit = localStorage.getItem(this.constants.MEASUREMENT_SYSTEM_CACHE_KEY);
		if (preferedUnit) {
			const unit = JSON.parse(preferedUnit);
			this.selectUnit(unit);
		}
	}

	ngOnChanges(changes: SimpleChanges): void {

		// If going up a level while on table view, switch to grid view.
		if (changes.data.previousValue && changes.data.previousValue.tableAvailable && !changes.data.currentValue.tableAvailable) {
			this.selectView('GRID');
		}

		if (changes && this.data) {
			this.displayedSorts = []; // Reset for each change

			if (this.data.sortOptions) {
				// Find selected sorting option and set sortMode to it.
				this.data.sortOptions.forEach(sort => {
					if (sort.selected) {
						this.labelService.getLabel(sort.displayName).then(res => this.sortMode = res.toLowerCase());
					}
					// Filter out sort options that should be displayed if applicable
					if (sort.properties && sort.properties.showInDropDown) {
						this.displayedSorts.push(sort);
					}
				});

				// If no sort options with properties existed, show default options
				if (this.displayedSorts.length === 0) { this.displayedSorts = this.data.sortOptions; }

				// Get labels for sorting options
				this.displayedSorts.forEach(sort => {
					this.labelService.getLabel(sort.displayName).then(res => sort.displayName = res);
				});
			}

			if (this.data.systems) {
				// Find selected system unit
				this.data.systems.forEach(unit => {
					if (unit.selected) {
						this.unitMode = unit.displayName;
					}
				});
			}
		}
	}

	public hasView(view): boolean {
		return this.viewOptions.includes(view);
	}

	/** Switch to selected view */
	public selectView(view): void {
		this.viewMode = view;
		this.view.emit(view);
	}

	/** Perform a search with a selected sort option */
	public selectSorting(index) {
		this.loadingService.show();
		this.displayedSorts[index].select();
		this.labelService.getLabel(this.displayedSorts[index].displayName).then(res => this.sortMode = res.toLowerCase());
	}

	/** Change unit to metric or imperial */
	public selectUnit(index) {
		this.loadingService.show();
		this.data.systems[index].select();
		this.unitMode = this.data.systems[index].displayName;
		localStorage.setItem(this.constants.MEASUREMENT_SYSTEM_CACHE_KEY, JSON.stringify(index));
	}

	public openFilters() {
		this.filterToggleService.showFilters(this.id);
	}
}