// Angular Core
import { Component, DoCheck, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';

// Services
import { CartService } from 'src/app/services/cart/cart.service';
import { environment } from 'src/environments/environment';

@Component({
  standalone: false,
  selector: 'app-messages',
  templateUrl: './messages.component.html', // Path to your HTML template
  styleUrls: ['./messages.component.scss'], // Path to your CSS
  encapsulation: ViewEncapsulation.None
})
export class MessagesComponent implements OnInit, OnChanges, DoCheck {
  @Input() messagesArray!: any;
  @Input() messageKey!: string;
  index = 0;
  myInterval = 5000;
  noWrapSlides = false;
  mesgg: any[] = [];
  slides: any[] = [];
  totalItems!: number
  imgUrl: string = environment.imageUrl;

  constructor(
    private cartService: CartService
  ){}

  ngOnInit(): void {
    // this.getSupplierMessages()
  }

  ngOnChanges(changes: SimpleChanges): void {
  }

  // detectMessageChangesListner = this.cartService.detectMessageChangesEmitter.subscribe((value: any) => {
  //   if(!this.mesgg.includes(value[0])){
  //     this.getSupplierMessages();
  //   }
  //   // if(value === true){
  //   //   this.getSupplierMessages()
  //   // }
  // })

  ngDoCheck(): void {
    let validMessagesArray = this.messagesArray.filter((item: any) => !item.valid)

    const areAllElementsInArray1InArray2 = validMessagesArray.every((item1: any) => this.mesgg.includes(item1))
    if(!areAllElementsInArray1InArray2 || this.mesgg.length === 0 || (validMessagesArray.length != this.mesgg.length)){
      this.getSupplierMessages()
    }
  }

  getSupplierMessages(){
    this.index = 0;
    this.myInterval = 5000;
    this.noWrapSlides = false;
    this.mesgg = [];
    this.slides = [];
    if (this.messagesArray) {
      this.mesgg = this.messagesArray.filter((item: any) => !item.valid);
    }
    this.totalItems = this.mesgg.length;

    if (typeof this.mesgg[this.index] !== 'undefined') {
      this.slides = this.mesgg.map((item, index) => {
        return {
          text: item.msg,
          id: index,
        };
      });
    }
  }

  trackByFn(index: any, item: any){
    return item.text
  }

  
}