// Libraries
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { MatDialog } from '@angular/material';
import { FormGroup } from '@angular/forms';
import { MatSnackBar } from '@angular/material';
import { Observable } from 'rxjs';

// State management
import { GlobalState } from '@app/core/state';
import { AddAcademicYearRequest } from '@app/degree-planner/store/actions/addAcademicYear.actions';
import { PromptDialogComponent } from '@app/shared/dialogs/prompt-dialog/prompt-dialog.component';
import { CreatePlan } from '@app/degree-planner/store/actions/plan.actions';

@Component({
  selector: 'cse-sidenav-menu-item',
  templateUrl: './sidenav-menu-item.component.html',
  styleUrls: ['./sidenav-menu-item.component.scss'],
})
export class SidenavMenuItemComponent {
  public inputForm: FormGroup;
  public yearCodes$: Observable<string[]>;
  constructor(
    private store: Store<GlobalState>,
    public dialog: MatDialog,
    private snackBar: MatSnackBar,
  ) {}

  public onAddAcademicYear() {
    this.store.dispatch(new AddAcademicYearRequest());
    this.snackBar.open('New academic year has been created');
  }

  public print() {
    window.print();
  }

  public onCreatePlanClick() {
    this.dialog
      .open(PromptDialogComponent, {
        data: {
          initialValue: name,
          title: 'Add degree plan',
          confirmText: 'Save',
          inputName: 'i.e. Psychology',
        },
      })
      .afterClosed()
      .subscribe((result: { confirmed: boolean; value: string }) => {
        const { confirmed, value } = result;
        if (confirmed) {
          const action = new CreatePlan({ name: value, primary: false });
          this.store.dispatch(action);
        }
      });
  }
}