import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { Utils } from '../../../../utils/utils';

const moment = require('moment').default || require('moment');

@Component({
	selector: 'esp-assignment-modal',
	templateUrl: './assignment-modal.component.html',
	styleUrls: ['./assignment-modal.component.scss'],
})
export class AssignmentModalComponent implements OnInit {
	data: any;
	title: string;
	message: string;
	permanentIsChecked = false;
	permanentOne = false;
	permanentTwo = false;
	permanentThree = false;
	permanentFour = false;
	permanentFive = false;
	startDate: string;
	endDate: string;
	startDateOne;
	startDateTwo;
	startDateThree;
	startDateFour;
	startDateFive;
	endDateOne;
	endDateTwo;
	endDateThree;
	endDateFour;
	overrideStandBy = [
		{
			checkboxModal: this.permanentOne,
			datePickerStart: 'startDateOne',
			datePickerEnd: 'endDateOne',
			active: false,
			index: 0,
		},
		{
			checkboxModal: this.permanentTwo,
			datePickerStart: 'startDateTwo',
			datePickerEnd: 'endDateTwo',
			active: false,
			index: 1,
		},
		{
			checkboxModal: this.permanentThree,
			datePickerStart: 'startDateThree',
			datePickerEnd: 'endDateThree',
			active: false,
			index: 2,
		},
		{
			checkboxModal: this.permanentFour,
			datePickerStart: 'startDateFour',
			datePickerEnd: 'endDateFour',
			active: false,
			index: 3,
		},
		{
			checkboxModal: this.permanentFive,
			datePickerStart: 'startDateFive',
			datePickerEnd: 'endDateFive',
			active: false,
			index: 4,
		},
	];

	overrideActive = [
		{
			checkboxModal: this.permanentOne,
			datePickerStart: 'startDateOne',
			datePickerEnd: 'endDateOne',
			active: true,
			index: 0,
		},
	];

	constructor(public bsModalRef: BsModalRef) {}

	ngOnInit(): void {
		if (this.data) {
			this.title = `${this.data.title} - ${this.data.rowIndex}`;
			this.message = this.data.message;
		}
		const currentDate = this.formatDate(new Date());
		this.startDateOne = currentDate;
		this.startDateTwo = currentDate;
		this.startDateThree = currentDate;
		this.startDateFour = currentDate;
		this.startDateFive = currentDate;
	}

	getCurrentDate(): string {
		return Utils.getCurrentDate();
	}

	onConfirm(): void {
		const assignmentData = [];
		this.overrideActive.forEach(x => {
			if (this[x.datePickerEnd] === 'Permanent') {
				this[x.datePickerEnd] = '';
			}
			assignmentData.push({ startDate: this[x.datePickerStart], endDate: this[x.datePickerEnd] });
		});
		this.bsModalRef.content.onClose.next(assignmentData);
		this.bsModalRef.hide();
	}

	onCancel(): void {
		this.bsModalRef.hide();
	}

	getDateEndHolder(checkboxModal): string {
		return checkboxModal ? 'Permanent' : 'none selected';
	}

	formatDate(date): string {
		const momentDate = moment(date);
		return momentDate.format('MM/DD/YYYY');
	}

	dateChanged(date, src): void {
		// setting models
		if (date !== null) {
			this[src] = this.formatDate(date);
		}
	}
	addOverride(): void {
		if (this.overrideActive.length < 5) {
			const newOverrideObj = this.overrideStandBy[this.overrideActive.length];
			if (newOverrideObj.checkboxModal === true) {
				newOverrideObj.checkboxModal = false;
			}
			this.overrideActive.push(newOverrideObj);
		}
		this.activateLastIndex();
	}

	activateLastIndex(): void {
		this.overrideActive.forEach(x => {
			x.active = false;
		});
		this.overrideActive[this.overrideActive.length - 1].active = true;
	}

	getAbility(): boolean {
		return false;
	}

	removeOverride(index): void {
		if (index !== 0) {
			const element = this.overrideActive.find(x => x.index === index);
			element.checkboxModal = false;
			const toRemove = this.overrideActive.findIndex(x => x.index === index);
			this.overrideActive.splice(toRemove, 1);
		}
	}
	isOverrideDisabled(): boolean {
		const isLastEndDate = this[this.overrideActive[this.overrideActive.length - 1].datePickerEnd] === undefined;
		const isMaxOverride = this.overrideActive.length > 4;
		return isLastEndDate || isMaxOverride;
	}
	checkboxChange(event, datePickerEnd): void {
		if (event.target.checked === true) {
			this[datePickerEnd] = 'Permanent';
		} else {
			this[datePickerEnd] = undefined;
		}
	}
}