import { tap } from 'rxjs/operators';
// Libraries
import { OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { select } from '@ngrx/store';
import { Component } from '@angular/core';
import {
  MatSelectChange,
  MatExpansionPanelState,
  MatExpansionPanel,
} from '@angular/material';
import { MatDialog } from '@angular/material';
import { Store } from '@ngrx/store';
import { MediaMatcher } from '@angular/cdk/layout';

// Models
import { GlobalState } from '@app/core/state';
import { DegreePlan } from '@app/core/models/degree-plan';
import { Year } from '@app/core/models/year';

// Selectors
import {
  getAllDegreePlans,
  getVisibleRoadmapId,
  firstActiveTermCode,
  getAllVisibleTermsByYear,
  getVisibleDegreePlan,
  hasLoadedDegreePlan,
} from '@app/degree-planner/store/selectors';

// Actions
import {
  SwitchPlan,
  MakePlanPrimary,
} from '@app/degree-planner/store/actions/plan.actions';

import { ModifyPlanDialogComponent } from './dialogs/modify-plan-dialog/modify-plan-dialog.component';
import { ToggleAcademicYear } from './store/actions/ui.actions';

@Component({
  selector: 'cse-degree-planner',
  templateUrl: './degree-planner.component.html',
  styleUrls: ['./degree-planner.component.scss'],
})
export class DegreePlannerComponent implements OnInit {
  public termsByAcademicYear: Object;
  public mobileView: MediaQueryList;
  public coursesData$: any;

  public hasLoadedDegreePlan$: Observable<boolean>;
  public visibleRoadmapId$: Observable<number | undefined>;
  public visibleDegreePlan$: Observable<DegreePlan | undefined>;
  public allDegreePlans$: Observable<DegreePlan[]>;
  public firstActiveTermCode$: Observable<string | undefined>;
  public termsByYear$: Observable<Year[]>;

  constructor(
    private store: Store<GlobalState>,
    public mediaMatcher: MediaMatcher,
    public dialog: MatDialog,
  ) {
    this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
  }

  public ngOnInit() {
    this.hasLoadedDegreePlan$ = this.store.pipe(select(hasLoadedDegreePlan));
    this.visibleRoadmapId$ = this.store.pipe(select(getVisibleRoadmapId));
    this.visibleDegreePlan$ = this.store.pipe(select(getVisibleDegreePlan));
    this.allDegreePlans$ = this.store.pipe(select(getAllDegreePlans));
    this.firstActiveTermCode$ = this.store.pipe(select(firstActiveTermCode));
    this.termsByYear$ = this.store.pipe(select(getAllVisibleTermsByYear));
  }

  public handleAcademicYearToggle(year: Year): void {
    // this.store.dispatch(
    // new ToggleAcademicYear({ year: year.twoDigitYearCode.toString() }),
    // );
  }

  public handleDegreePlanChange(event: MatSelectChange): void {
    if (typeof event.value === 'number') {
      this.store.dispatch(new SwitchPlan({ newVisibleRoadmapId: event.value }));
    }
  }

  public onCreatePlanClick() {
    // TODO
    console.log('onCreatePlanClick');
    const data = {};
    this.dialog.open(ModifyPlanDialogComponent, { data });
  }

  public onRenamePlanClick() {
    // TODO
    console.log('onRenamePlanClick');
    const data = {};
    this.dialog.open(ModifyPlanDialogComponent, { data });
  }

  public onMakePrimayClick() {
    // TODO open confirm dialog
    this.store.dispatch(new MakePlanPrimary());
  }

  public onDeletePlanClick() {
    // TODO
    // open confirm dialog
    console.log('onDeletePlanClick');
  }

  public onPrintPlanClick() {
    // TODO
    console.log('onPrintPlanClick');
  }

  public onSharePlanClick() {
    // TODO
    console.log('onSharePlanClick');
  }

  public getTermDropZone() {
    const termCodes = ['favoriteCourse-dropZone'];

    for (const yearCode in this.termsByAcademicYear) {
      if (this.termsByAcademicYear[yearCode]) {
        const year = this.termsByAcademicYear[yearCode];
        for (const termKey in year.terms) {
          if (year.terms[termKey]) {
            const term = year.terms[termKey];
            termCodes.push('term-' + term.termCode);
          }
        }
      }
    }
    // console.log(termCodes);

    return termCodes;
  }
}