import { Component, OnInit } from '@angular/core';
import { trigger, state, transition, style, animate } from '@angular/animations';
import { ActivatedRoute, Router } from '@angular/router';
import { select, Store } from '@ngrx/store';
import { Observable } from 'rxjs';

import { Member } from '@overflow/commons-typescript/model/member';
import { AuthSelector } from '@overflow/shared/auth/store';

import { AppComponent } from '../../../../app.component';
import { PagesComponent } from '../../../../pages/pages.component';
import { DomainMember } from '@overflow/commons-typescript/model/domain';

@Component({
  selector: 'of-inline-profile',
  templateUrl: './app.profile.component.html',
  animations: [
    trigger('menu', [
      state('hidden', style({
        height: '0px'
      })),
      state('visible', style({
        height: '*'
      })),
      transition('visible => hidden', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
      transition('hidden => visible', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
    ])
  ]
})
export class AppInlineProfileComponent implements OnInit {
  active: boolean;
  domainMember$: Observable<DomainMember>;

  constructor(
    public app: PagesComponent,
    private store: Store<any>,
  ) {
  }

  ngOnInit() {
    this.domainMember$ = this.store.select(AuthSelector.selectDomainMember);
  }

  onClick(event) {
    this.active = !this.active;
    setTimeout(() => {
      this.app.layoutMenuScrollerViewChild.moveBar();
    }, 450);
    event.preventDefault();
  }
}
