import { Component, ViewChild, OnInit } from '@angular/core';
import { MatSidenav, MatDialog } from '@angular/material';
import { Profile } from '@app/core/models/profile';
import {
  FormBuilder,
  FormGroup,
  FormControl,
  Validators,
} from '@angular/forms';
import { Course } from '@app/core/models/course';
import { DegreePlannerApiService } from '@app/degree-planner/services/api.service';
import { CourseDetailsDialogComponent } from '@app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component';

@Component({
  selector: 'cse-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  coursesData$: any;
  selectedDegreePlan: number;
  courses: Course[];
  profile: Profile;
  coursesForm: FormGroup;
  subjectCode: FormControl;
  @ViewChild('rightAddCourse') public rightAddCourse: MatSidenav;

  constructor(
    public dialog: MatDialog,
    private fb: FormBuilder,
    private api: DegreePlannerApiService,
  ) {
    this.subjectCode = new FormControl('', [Validators.required]);
    this.coursesForm = this.fb.group({
      coursesInput: null,
    });
  }

  ngOnInit() {
    this.api.getUserProfile().subscribe(profile => {
      const customEvent = new CustomEvent('myuw-login', {
        detail: {
          person: {
            firstName: profile.firstName,
          },
        },
      });
      document.dispatchEvent(customEvent);
    });
  }

  openCourseDetailsDialog(course) {
    this.api
      .getCourseDetails(
        course.payload.subject.subjectCode,
        course.payload.courseId,
      )
      .subscribe(courseDetails => {
        this.dialog.open(CourseDetailsDialogComponent, {
          data: { courseDetails: courseDetails },
          closeOnNavigation: true,
        });
      });
  }
}