import { AuthState } from './../../auth/store/auth.reducers';
import { Subscription } from 'rxjs';
import { ChartsFeatureState, ChartsState } from './../store/charts.reducers';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import { Chart } from '../model/Chart.model';
import { ChartsService } from '../charts.service';
import * as html2canvas from 'html2canvas';

@Component({
  selector: 'app-public-charts',
  templateUrl: './public-charts.component.html',
  styleUrls: ['./public-charts.component.scss']
})
export class PublicChartsComponent implements OnInit, OnDestroy {

  private storeSubscription: Subscription;
  private authStoreSubscription: Subscription;

  charts: Chart[];
  private userId: number;

  constructor(private chartsService: ChartsService, private store: Store<ChartsFeatureState>) {
    this.storeSubscription = this.store.select('charts').subscribe(
      (state: ChartsState) => {
        state.publicCharts !== null ? this.charts = state.publicCharts : this.chartsService.requestPublicCharts();
      }
    );
    this.authStoreSubscription = this.store.select('authState').subscribe(
      (state: AuthState) => {
        if (state.user && state.user.id)
          this.userId = state.user.id;
      }
    )
  }

  ngOnInit() {
  }

  ngOnDestroy(){
    this.storeSubscription.unsubscribe();
    this.authStoreSubscription.unsubscribe();
  }

  onPinChart(id: number){
    this.chartsService.requestPinChart(id);
  }

}
