import {ChangeDetectorRef, Component, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
import {SocketService} from "../../../shared/services/socket.service";
import {Subscription} from "rxjs";
import * as L from "leaflet";

@Component({
  selector: 'app-overall-ground',
  templateUrl: './overall-ground.component.html',
  styleUrls: ['./overall-ground.component.scss']
})
export class OverallGroundComponent implements OnInit, OnDestroy {
  isClicked = false;
  isConnected = false;
  states = Array(6).fill(0);
  state1 = '';
  state2 = '';
  state3 = '';
  state4 = '';
  state5 = '';
  state6 = '';
  Sstate1 = false;
  Sstate2 = false;
  Sstate3 = false;
  Sstate4 = false;
  imageIcon = 'assets/images/sensor-off.png';
  title = 'ALARM: SMOKE ALERT'
  private statusSubscription?: Subscription;
  private messageSubscription?: Subscription;
  private intervalId: any;


  constructor(private socketService$: SocketService) {
  }

  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.Sstate1 = !this.Sstate1;
    let str = {id: '0', type: 'cmd', state1: this.Sstate1.toString()};
    this.socketService$.sendMessage(str);
  }

  toggleState2() {
    this.Sstate2 = !this.Sstate2;
    let str = {id: '0', type: 'cmd', state2: this.Sstate2.toString()};
    this.socketService$.sendMessage(str);
  }

  getImageSource(): string {
    return (this.Sstate1 && this.Sstate2) || this.Sstate1 ? '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' ? 'ON' : 'OFF'; //  1 OFF
      this.state2 = message.state2 === '0' ? 'ON' : 'OFF'; // 1 OFF
      this.state3 = message.state3 === '1' ? 'ON' : 'OFF';
      this.state4 = message.state4 === '1' ? 'ON' : 'OFF';
      this.state5 = message.state5 === '1' ? 'ON' : 'OFF';
      this.state6 = message.state6 === '1' ? 'ON' : 'OFF';
      this.Sstate1 = this.state5 === 'ON';
      this.Sstate2 = this.state6 === 'ON';

      this.Sstate3 = this.state1 === 'ON';
      this.Sstate4 = this.state2 === 'ON';
    }
    if(this.Sstate1 && this.Sstate2)
      this.title = 'ALARM: VIBRATION ALERT'

  }

}