import { Component, OnInit, Inject, AfterContentInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ConfirmationService } from 'primeng/primeng';
import { Store, select } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
import * as DetailStore from '../../store/detail';
import { sensorSelector } from '../../store';
import { Sensor } from '@overflow/commons-typescript/model/sensor';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'of-sensor-detail',
  templateUrl: './detail.component.html',
  providers: [ConfirmationService]
})
export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {

  sensorSubscription$: Subscription;
  sensor$ = this.detailStore.pipe(select(sensorSelector.select('sensor')));
  sensor: Sensor;
  sensorSettingDisplay: boolean;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private confirmationService: ConfirmationService,
    private detailStore: Store<DetailStore.State>,
  ) {
    this.sensorSettingDisplay = false;
  }

  ngOnInit() {
    this.sensorSubscription$ = this.sensor$.subscribe(
      (sensor: Sensor) => {
        console.log(sensor);
        this.sensor = sensor;
      },
      (error: RPCClientError) => {
        console.log(error.response.message);
      }
    );
  }

  ngAfterContentInit() {
    const sensorId = this.route.snapshot.paramMap.get('id');
    this.detailStore.dispatch(
      new DetailStore.Read(
        { id: sensorId }
      )
    );
  }

  ngOnDestroy() {
    if (this.sensorSubscription$) {
      this.sensorSubscription$.unsubscribe();
    }
  }

  onStartOrStop() { }

  onEdit() {
    this.sensorSettingDisplay = true;
  }

  onRemove() {
    this.confirmationService.confirm({
      header: 'Are you sure to remove this Sensor?',
      icon: 'fa fa-trash',
      message: 'All the related data will be deleted. ',
      accept: () => {
        alert('으앙 안돼 지우지마ㅠㅠ');
      },
      reject: () => {
      }
    });
  }

  onTargetClick(target) {
    // this.router.navigate(['sensors'], { queryParams: { target: target.id } });
    this.router.navigate(['target', target.id, 'info']);
  }
}