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

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

  private storeSubscription: Subscription;

  charts: PrivateCharts;

  constructor(private chartsService: ChartsService, private store: Store<ChartsFeatureState>) {
    this.storeSubscription = this.store.select('charts').subscribe(
      (state: ChartsState) => {
        state.privateCharts !== null ? this.charts = state.privateCharts : this.chartsService.requestPrivateCharts();
      }
    );
  }

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

  onDeleteClick(id: number){
    this.chartsService.requestDeleteChart(id);
  }

  onUnpinClick(id: number){
    this.chartsService.requestUnpinChart(id);
  }
  
}
