import {Component, OnDestroy, OnInit} from '@angular/core';
import {Subscription} from "rxjs";
import {SocketService} from "../../../shared/services/socket.service";
import {ToastrService} from "ngx-toastr";
import {CameraDialogComponent} from "../../../shared/component/camera-dialog/camera-dialog.component";
import {MatDialog} from "@angular/material/dialog";

@Component({
  selector: 'app-security-system-details',
  templateUrl: './security-system-details.component.html',
  styleUrls: ['./security-system-details.component.scss']
})
export class SecuritySystemDetailsComponent implements OnInit, OnDestroy {
  isConnected = false;
  state1 = false;
  state2 = false;
  state3 = '';
  state4 = '';
  state5 = false;
  state6 = false;
  switchArm = false;
  switchWarning = false;
  isReady = true;
  private statusSubscription?: Subscription;
  private messageSubscription?: Subscription;
  private intervalId: any;


  constructor(
    private socketService$: SocketService,
    private toastr: ToastrService,
    private dialog: MatDialog,
  ) {}

  ngOnInit() {
    // this.socketService$.connect();
    this.statusSubscription = this.socketService$.status$.subscribe(isConnected => {
      this.isConnected = isConnected;
      this.getReadings();
      if (this.isConnected) {
        this.intervalId = setInterval(() => this.getReadings(), 5000);
        this.messageSubscription = this.socketService$.messages$.subscribe(message => {
          this.onMessage(message);
        });
      }
    });
  }

  ngOnDestroy(): void {
    if (this.statusSubscription) {
      this.statusSubscription.unsubscribe();
    }
    if (this.messageSubscription) {
      this.messageSubscription.unsubscribe();
    }
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
    this.socketService$.close();
  }

  getReadings() {
    let str = {id: '0', type: 'get'};
    this.socketService$.sendMessage(str);
  }

  toggleState1() {
    this.switchArm = !this.switchArm;
    let str = {id: '0', type: 'cmd', state1: this.switchArm.toString()};
    this.socketService$.sendMessage(str);
  }

  getImageSource(): string {
    return (this.state5 && this.state6) || this.state5 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png';
  }

  onMessage(message: any) {
    if (message.id == '0' && message.type === 'get') {
      this.state1 = message.state1 === '0'; //  1 OFF // alarm 12h
      this.state2 = message.state2 === '0'; // 1 OFF // alarm 1h
      this.state3 = message.state3 === '1' ? 'ON' : 'OFF';
      this.state4 = message.state4 === '1' ? 'ON' : 'OFF';
      this.state5 = message.state5 === '1'; // alarm 9h && 6h // 1 ON, 0 OFF
      this.state6 = message.state6 === '1'; // ? 'ON' : 'OFF';

      this.switchArm = message.state5 === '1';// alarm 9h && 6h // 1 ON, 0 OFF
      this.switchWarning = message.state6 === '1';// alarm 9h && 6h // 1 ON, 0 OFF

      this.isReady = message.ready === '1';
      if (message.ready === '0' && this.state5) { // not ready and ON arm
        this.toastr.warning('System not ready', 'Warning', {timeOut: 5000});
      }
    }
  }
  openDialog(): void {
    this.dialog.open(CameraDialogComponent, {
      width: '80vw',
      data: '',
    });
  }
}