import { Component, Input } from '@angular/core';
import { DataService } from '../../core/data.service';
import { FavoriteCourse } from '../../core/models/favorite-course';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { DegreePlannerDataService } from '@app/core/service/degree-planner-data.service';
import { ActivatedRoute } from '@angular/router';

@Component({
	selector: 'cse-favorites-container',
	templateUrl: './favorites-container.component.html',
	styleUrls: ['./favorites-container.component.scss']
})

export class FavoritesContainerComponent {
	favoriteCourse: FavoriteCourse;
	termCodes$: any;
	@Input() favoriteDropZone: [];
	dropZones: any[];
	favoriteCourses: FavoriteCourse[];

	constructor(
		private route: ActivatedRoute,
		public degreePlannerDataSvc: DegreePlannerDataService,
		private dataService: DataService) {
			this.favoriteCourses = route.snapshot.data.requiredData.favorites;
			this.termCodes$ = route.snapshot.data.requiredData.termCodes$;
	}

	drop(event: CdkDragDrop<string[]>) {
		const { container, previousContainer, previousIndex } = event;
		// Get the course JSON
		const item = event.item.data;

		if (event.previousContainer.id !== event.container.id) {

			container.data.push(item);
			previousContainer.data.splice(previousIndex, 1);

			// Add this coruse to the favorites list
			this.dataService.saveFavoriteCourse(event.item.data.subjectCode, event.item.data.courseId)
			.subscribe(favoriteCourse => {
				this.favoriteCourse = favoriteCourse;
			});

			// Remove this course from the degree plan
			this.dataService.removeCourse(this.degreePlannerDataSvc.getPlanId(), event.item.data.id);
		}
	}
}