import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
import { PollService } from '../../../../../core/services/poll.service';
import { environment } from '../../../../../../environments/environment';
import { Router } from '@angular/router';
import { DateUtilitiesService } from '../../../../../core/services/date.utilities.service';
import { DOCUMENT } from '@angular/common';
import { StorageService } from '../../../../../core/services/storage.service';
import { DateChoice, TimeSlices, timeSlicesProposals } from '../../../../../core/models/dateChoice.model';
import { ToastService } from '../../../../../core/services/toast.service';
import { TranslateService } from '@ngx-translate/core';

@Component({
	selector: 'app-step-four',
	templateUrl: './step-four.component.html',
	styleUrls: ['./step-four.component.scss'],
})
export class StepFourComponent implements OnInit {
	public urlPrefix: any;
	public environment = environment;
	@Input()
	step_max: any;
	@Input()
	form: any;
	showSameTimeSlices: boolean = false;
	timeSlicesProposals: TimeSlices[] = timeSlicesProposals;
	display_same_hours_dialog: boolean = false;

	constructor(
		private dateUtilitiesService: DateUtilitiesService,
		private router: Router,
		private toastService: ToastService,
		private translate: TranslateService,
		private cd: ChangeDetectorRef,
		@Inject(DOCUMENT) private document: any,
		private storageService: StorageService,
		public pollService: PollService
	) {
		this.pollService.step_current = 4;
	}

	ngOnInit(): void {}

	/**
	 * toggle hasSeveralHours to show an other form section
	 * so that the user can choose between time slices applying equally to all days in her form,
	 * or have the ability to define different times lices for each day
	 */
	toggleHasSeveralHours() {
		this.pollService.form.patchValue({
			hasSeveralHours: !this.pollService.form.value.hasSeveralHours,
		});
	}

	addChoiceHourForDay(day_id, dayChoice: DateChoice): void {
		let lastDateChoice = this.pollService.dateChoiceList[this.pollService.dateChoiceList.length];

		dayChoice.timeSlices.push({
			literal: '',
		});
		dayChoice.timeSlices.sort((a: any, b: any) => {
			return a.date_object - b.date_object;
		});
		this.focusOnChoice(day_id, dayChoice.timeSlices.length - 1);
	}

	focusOnChoice(day_id, index): void {
		this.cd.detectChanges();
		const selector = '#day_' + day_id + '_dateChoices_' + index;
		const elem = this.document.querySelector(selector);
		if (elem) {
			elem.focus();
		}
	}

	addPreselect(literal: string) {
		if (
			!this.pollService.timeList.find((elem) => {
				return elem.literal === literal;
			})
		) {
			this.pollService.timeList.push({ literal });
		}
	}

	applyTimeSlicesToDateChoices() {
		let timeSlicesToApply = this.pollService.timeList;
		this.pollService.dateChoiceList.forEach((elem) => {
			return (elem.timeSlices = Object.create(timeSlicesToApply));
		});
		this.closeModalAndFocusOnOpenModalButton();
	}

	/**
	 * on modal close, focus on the close button for accessibility
	 */
	closeModalAndFocusOnOpenModalButton() {
		this.display_same_hours_dialog = false;
		let buttonClose = this.document.querySelector('#apply_same_hour');
		if (buttonClose) {
			buttonClose.focus();
		}
	}

	/**
	 * open the modal to set the same timeslices to all days
	 */
	openModal() {
		this.display_same_hours_dialog = true;
		this.cd.detectChanges();
		let buttonClose = this.document.querySelector('#close_dialog');
		console.log('openModal', buttonClose);
		if (buttonClose) {
			buttonClose.focus();
		}
	}

	removeHour(day_id, dayChoice, id: number) {
		dayChoice.splice(id, 1);
		this.cd.detectChanges();
		this.focusOnChoice(day_id, id - 1 < 0 ? 0 : id - 1);

		this.translate.get('success.deleted_option').subscribe((resp) => {
			this.toastService.display(`${resp}`);
		});
	}
}