import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
import { Router } from '@angular/router';
import { cloneDeep } from 'lodash';
import { BsModalService, BsModalRef, ModalOptions } from 'ngx-bootstrap/modal';
import { Subscription } from 'rxjs';
import { GraphQLService } from '../../../../utils';
import { AllocationMethodModalComponent } from '../../modals/allocation-method-modal/allocation-method.modal.component';

@Component({
	selector: 'aeap-primary-toolbar',
	templateUrl: './primary-toolbar.component.html',
	styleUrls: ['./primary-toolbar.component.scss'],
})
export class PrimaryToolbarComponent {
	@Input() navigationIcon = null;
	@Input() tabList = null;
	@Input() activeTabIndex = 0;
	@Input() openWorkbookList = null;
	@Input() planVersion = null;
	@Input() currentWeek = null;
	@Input() historyUrl = null;
	@Input() settingIcons = null;
	@Input() toolbarTitle = null;
	@Output() tabChangeEvent = new EventEmitter();
	@Output() planVersionChangeEvent = new EventEmitter();
	@Output() workbookSelectionChange = new EventEmitter();
	@Input() allocationModalConfig;
	@Input() i18n;
	@Input() periods = [];

	bsModalRef: BsModalRef;

	timeQuery$: Subscription;

	@Input() backPage = {
		show:false,
		title:'',
		options:[],
		showOptions: true
	};
	showOptions = false;
	constructor(
			private router: Router,
			private modalService: BsModalService,
			private graphQL: GraphQLService
		) {}

    ngOnChanges() {
        this.toolbarTitle = this.openWorkbookList[0]?.label;
	}

	showBackPage(){
		return this.backPage?.show && this.backPage?.options.length >1 ? true : false;
	}

	goToBackPage(index=0){
		if(!this.backPage.showOptions){
			window.history.back();
			return;
		}
		this.showOptions = false;
		const currentIndex = index===0 ? index+1 :index;
		const url = this.backPage.options[currentIndex].url;
		this.router.navigateByUrl(url);
	}

	onSelectChange(event) {
		this.workbookSelectionChange.emit(event);
	}

	history() {
		this.router.navigateByUrl(this.historyUrl);
	}

	onTabChange(index) {
		this.tabChangeEvent.emit(index);
	}

	onPlanVersionChange(event) {
		this.planVersionChangeEvent.emit(event);
	}

	onIconClick(event){
		if(event.action === 'open-allocation'){
			this.openAllocationMethod(event)
		}
	}

	openAllocationMethod(event) {
		const initialState = {
			config: {
				...getTranslatedAllocationMethodModalConfig(this.allocationModalConfig, this.i18n,this.periods),
				onApplyCallback: this.allocationMethodCallback.bind(this),
			},
		};
		this.openAllocationMethodModal({ class: 'allocation-method-modal-container justify-content-center align-items-center', initialState });
	}

	openAllocationMethodModal(initialState) {
		const config: ModalOptions = initialState;
		this.bsModalRef = this.modalService.show(
			AllocationMethodModalComponent,
			Object.assign({ ignoreBackdropClick: true }, config)
		);
	}

	allocationMethodCallback(method){

	}
}

export const getTranslatedAllocationMethodModalConfig = (configJson, translation,periods) => {
	const config = cloneDeep(configJson);
	const allocationMethodOptions = configJson['select-allocation-method']['allocation-method-options'];
	config['select-allocation-method']['allocation-method-options'].length = 0;
	config['select-allocation-method']['allocation-method-options'] = allocationMethodOptions.map(option => {
		const opt = {
			label: translation[option['label']],
			value : option['value'],
		}
		if(option['select-weighted-by-options']){
			opt['select-weighted-by-options'] = cloneDeep(option['select-weighted-by-options']);
			opt['select-weighted-by-options']['label'] = translation[option['select-weighted-by-options']['label']];
			opt['select-weighted-by-options']['placeholder'] = translation[option['select-weighted-by-options']['placeholder']];
			opt['select-weighted-by-options']['dropdown-options'].forEach(option => {
				option.selected = false;
				option['label'] = translation[option['title']];
			});
		}
		if(option['select-weighted-period']){
			opt['select-weighted-period'] = cloneDeep(option['select-weighted-period']);
			opt['select-weighted-period']['label'] = translation[option['select-weighted-period']['label']];
			opt['select-weighted-period']['placeholder'] = translation[option['select-weighted-period']['placeholder']];
			opt['select-weighted-period']['dropdown-options'] = periods;
		}
		return opt;
	});
	configJson['select-measure']['dropdown-options'].map(option => {
		option.selected = false;
		option['label'] = translation[option['title']];
	});
	return {
		...config,
		text: {
			...config.text,
			title: translation[configJson['text']['title']]
		},
		"select-measure": {
			...config['select-measure'],
			label: translation[configJson['select-measure']['label']],
			placeholder: translation[configJson['select-measure']['placeholder']],
			'dropdown-options': configJson['select-measure']['dropdown-options']
		},
		'select-allocation-method': {
			...config['select-allocation-method'],
			label: translation[configJson['select-allocation-method']['label']],
		},
		footer: {
			...config.footer,
			cancelBtnText : translation[configJson['footer']['cancelBtnText']],
			saveBtnText: translation[configJson['footer']['saveBtnText']]
		}
	};
};