import { Component, OnInit, ViewChild, Output, EventEmitter, OnDestroy } from '@angular/core';
import { LogOutComponent } from '../log-out/log-out.component';
import { DoubleChoiceSwitch, DoubleChoiceSwitchColor } from '@libs/ui';
import { ModuleSwitcher } from '../../core/models/app-switcher.enum';
import { ModuleSwitcherService } from '../../core/services/module-switcher.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Store } from '@ngxs/store';
import { ProcessSelectors } from '../../core/store/selectors/process.selectors';
import { ChangeCurrentRoute } from '../../core/store/actions/process.actions';
import { Router } from '@angular/router';
import { BranchProcessSelectors } from '../../core/store/selectors/branch-process.selector';
import { BreadcrumbsState } from '../../core/store/state/breadcrumbs.state';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit, OnDestroy {
  @ViewChild('logOut') logOutDialog: LogOutComponent;
  doubleChoiceSwitch: DoubleChoiceSwitch;
  module: ModuleSwitcher = ModuleSwitcher.Customer;
  destroy$ = new Subject();

  constructor(private moduleSwitcherService: ModuleSwitcherService, private store: Store, private router: Router) {}

  customer = 'Kunden';

  ngOnInit() {
    this.doubleChoiceSwitch = <DoubleChoiceSwitch>{
      firstChoice: 'Kunden',
      secondChoice: 'Filiale',
      firstChoiceColor: <DoubleChoiceSwitchColor>{
        selectedBackground: '#1F466C',
        selectedText: '#ffffff',
        unSelectedbackground: '#edeff0',
        unSelectedText: '#000000',
      },
      secondChoiceColor: <DoubleChoiceSwitchColor>{
        selectedBackground: '#596470',
        selectedText: '#ffffff',
        unSelectedbackground: '#E6EFF9',
        unSelectedText: '#000000',
      },
      isFirstSwitchedOn: true,
    };

    this.moduleSwitcherService.moduleSwitcher$.pipe(takeUntil(this.destroy$)).subscribe((activeModule: ModuleSwitcher) => {
      this.doubleChoiceSwitch.isFirstSwitchedOn = activeModule === ModuleSwitcher.Customer;
      this.module = activeModule;
    });
  }

  ngOnDestroy() {
    this.destroy$.next();
  }

  logoff() {
    this.logOutDialog.openDialog();
  }

  siteChange(model: DoubleChoiceSwitch) {
    const currentCustomerProcess = this.store.selectSnapshot(ProcessSelectors.getCurrentProcess);
    const branchProcess = this.store.selectSnapshot(BranchProcessSelectors.get);
    const activeModule = model.isFirstSwitchedOn ? ModuleSwitcher.Customer : ModuleSwitcher.Branch;
    const currentProcess = model.isFirstSwitchedOn === true ? currentCustomerProcess : branchProcess;
    const hasRemissionBreadcrumbs = this.store.selectSnapshot(BreadcrumbsState.hasRemissionBreadcrumbs);
    this.moduleSwitcherService.switch(activeModule, currentProcess, !hasRemissionBreadcrumbs);
  }

  goToDashboard() {
    this.store.dispatch(new ChangeCurrentRoute('/dashboard'));
    this.router.navigate(['/dashboard']);
  }

  notificationAction() {
    // navigations needed for development purpouse
    // this.router.navigate(['/remission/finish']);
  }
}
