import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { SavedForLaterCourse } from '@app/core/models/saved-for-later-course';
import { GlobalState } from '@app/core/state';
import { getSavedForLaterCourses } from '@app/degree-planner/store/selectors';

// rsjx / ngrx
import { DegreePlannerState } from '@app/degree-planner/store/state';
import {
  AddSavedForLaterRequest,
  RemoveCourseRequest,
} from '@app/degree-planner/store/actions/plan.actions';

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

@Component({
  selector: 'cse-favorites-container',
  templateUrl: './favorites-container.component.html',
  styleUrls: ['./favorites-container.component.scss'],
})
export class SavedForLaterContainerComponent implements OnInit {
  public courses$: Observable<SavedForLaterCourse[]>;
  public dropZones$: Observable<String[]>;

  constructor(private store: Store<{ degreePlanner: DegreePlannerState }>) {}

  public ngOnInit() {
    this.dropZones$ = this.store.pipe(select(getDropZones));
    this.courses$ = this.store.pipe(select(getSavedForLaterCourses));
  }

  drop(event) {
    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 to saved for later

      const { subjectCode, courseId, id } = event.item.data;
      this.store.dispatch(
        new AddSavedForLaterRequest({ subjectCode, courseId }),
      );
      this.store.dispatch(new RemoveCourseRequest({ id }));
    }
  }
}