// Libraries
import { Component, Input, OnInit } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { MatDialog } from '@angular/material';

// rsjx / ngrx
import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { DegreePlannerState } from '@app/degree-planner/state';
import {
	ChangeCourseTermRequest,
	AddCourseRequest
} from '@app/degree-planner/actions/plan.actions';

// Selectors
import {
	getDropZones,
	isActiveTerm
} from '@app/degree-planner/selectors';

// Services
import { DataService } from '../../core/data.service';
import { DegreePlannerDataService } from './../../core/service/degree-planner-data.service';
import { SidenavService } from './../../core/service/sidenav.service';

// Models
import { PlannedTerm } from '@app/core/models/planned-term';
import {
	NotesDialogComponent,
	NotesDialogData
} from '../dialogs/notes-dialog/notes-dialog.component';

@Component({
	selector: 'cse-term-container',
	templateUrl: './term-container.component.html',
	styleUrls: ['./term-container.component.scss']
})
export class TermContainerComponent implements OnInit {
	@Input() term: PlannedTerm;
	public dropZones$: Observable<String[]>;
	public isActiveTerm$: Observable<Boolean>;

	constructor(
		private dataService: DataService,
		public degreePlannerDataSvc: DegreePlannerDataService,
		public dialog: MatDialog,
		private sidenavService: SidenavService,
		private store: Store<{ degreePlanner: DegreePlannerState }>,
	) {}

	public ngOnInit() {
		this.dropZones$ = this.store.pipe(select(getDropZones));
		this.isActiveTerm$ = this.store.pipe(select(isActiveTerm(this.term.termCode)));
	}

	public openAddSidenav(): void {
		this.sidenavService.open();
	}

	public openNotesDialog(): void {
		const termCode = this.term.termCode;
		const data: NotesDialogData = this.term.note
			? { termCode, hasExistingNote: true, initialText: this.term.note.note }
			: { termCode, hasExistingNote: false };
		this.dialog.open<any, NotesDialogData>(NotesDialogComponent, { data });
	}

	public getTotalCredits(): number {
		return this.term.courses.reduce((sum, course) => {
			return sum + course.credits;
		}, 0);
	}

	drop(event: CdkDragDrop<string[]>) {
		const newContainer = event.container.id;
		const previousContainer = event.previousContainer.id;

		if (newContainer === previousContainer) {
			// If the user dropped a course into the same container do nothing
			return;

		} else if (previousContainer.indexOf('term-') === 0) {
			// If moving from term to term

			// Get the pervious and new term code, and the record ID
			const to = newContainer.substr(5);
			const { termCode: from, id } = event.item.data;

			// Dispatch a new change request
			this.store.dispatch(new ChangeCourseTermRequest({ to, from, id }));

		} else if (previousContainer === 'saved-courses') {
			// If moving from saved courses to term
			console.log('add course and remove from saved');
			console.log(event);

			// Get the term code from the new term dropzone's ID
			const termCode = newContainer.substr(5);

			// Pull the course data from the moved item
			const { subjectCode, courseId} = event.item.data;

			// Dispatch the add event
			this.store.dispatch(new AddCourseRequest({ subjectCode, courseId, termCode }));
		}
	}
}