import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Store } from '@ngrx/store';
import { NgRxCoreAngularNavActions } from '@zionapps/ngrx-angular';
import { INgRxCoreMeta } from '@zionapps/ngrx-core';
import { Subscription } from 'rxjs/Subscription';<% if (ngRxSubStoreLocation === '@zionapps/ngrx-management') { %>
import { ManagementUserSelectors, <%= pascalCase(pluralDomainName) %>Actions, <%= pascalCase(singularDomainName) %>Selectors } from '@zionapps/ngrx-management';<% } else if (ngRxSubStoreLocation) { %>
import { ManagementUserSelectors } from '@zionapps/ngrx-management';
import { <%= pascalCase(pluralDomainName) %>Actions, <%= pascalCase(singularDomainName) %>Selectors } from '<%= ngRxSubStoreLocation %>';<% } else { %>
import { <%= pascalCase(pluralDomainName) %>Actions } from '../../../../store/<%= paramCase(pluralDomainName) %>/<%= paramCase(pluralDomainName) %>.actions';
import { <%= pascalCase(singularDomainName) %>Selectors } from '../../../../store/<%= paramCase(pluralDomainName) %>/<%= paramCase(pluralDomainName) %>.selectors';<% } %>

@Component({
  selector: 'app-<%= paramCase(singularDomainName) %>-view',
  templateUrl: './<%= paramCase(singularDomainName) %>-view.component.html',
  styleUrls: ['./<%= paramCase(singularDomainName) %>-view.component.scss'],
})
export class <%= pascalCase(singularDomainName) %>ViewComponent implements OnInit, OnDestroy {
  currentId: number;
  <%= camelCase(singularDomainName) %>$ = this.store$.select(<%= pascalCase(singularDomainName) %>Selectors.Current);
  hasAccess$ = this.store$.select(ManagementUserSelectors.HasAccess);
  readonly meta: INgRxCoreMeta;
  private paramsSubscription: Subscription;

  constructor(private route: ActivatedRoute, private store$: Store<any>) {
    this.meta = { source: '<%= pascalCase(singularDomainName) %>ViewComponent' };
  }

  ngOnInit(): void {
    this.paramsSubscription = this.route.params.subscribe((params: Params) => {
      this.currentId = +params['id'];
    });
  }

  ngOnDestroy(): void {
    this.store$.dispatch(<%= pascalCase(pluralDomainName) %>Actions.ClearCurrentId());
    if (this.paramsSubscription) {
      this.paramsSubscription.unsubscribe();
    }
  }

  onLeftButtonClick(): void {
    this.store$.dispatch(NgRxCoreAngularNavActions.NavigateByUrlRequest(`/<%= paramCase(componentName) %>`, this.meta));
  }

  onRightButtonClick(): void {
    const url = `/<%= paramCase(componentName) %>/edit/${this.currentId}?returnUrl=/<%= paramCase(componentName) %>/view/${this.currentId}`;
    this.store$.dispatch(NgRxCoreAngularNavActions.NavigateByUrlRequest(url, this.meta));
  }
}