import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { MatSnackBar } from '@angular/material';
import { Subscription } from 'rxjs';
import { HBORSnackbarService } from '../services/hbor-snackbar.service';
import { SnackbarState } from '../interfaces/snackbar.state';

@Component({
  selector: 'hbor-snackbar',
  templateUrl: './snackbar.component.html',
  styleUrls: ['./snackbar.component.css']
})
export class SnackbarComponent implements OnInit, OnDestroy {
  @Input() message: string;
  show = false;
  private subscription: Subscription;

  constructor(public snackBar: MatSnackBar, private snackbarService: HBORSnackbarService) { }

  ngOnInit() {
    this.subscription = this.snackbarService.snackbarState
      .subscribe((state: SnackbarState) => {
        this.show = state.show;
        if (this.show) {
          this.openSnackBar(state.message);
        }
      });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  openSnackBar(message: string) {
    const snackBarRef = this.snackBar.openFromComponent(MessageInfoComponent, {
      duration: 3000
    });
    snackBarRef.instance.message = message;
  }
}


@Component({
  selector: 'hbor-snack-bar-component-info-snack',
  templateUrl: 'snack-bar-component-info-snack.html',
  styleUrls: ['./snackbar.component.css'],
})
export class MessageInfoComponent {
  @Input() message: string;
}