import { Component, OnInit } from '@angular/core';
import { NavService, Menu } from '../../../../services/nav.service';

@Component({
  selector: 'app-bookmark',
  templateUrl: './bookmark.component.html',
  styleUrls: ['./bookmark.component.scss']
})
export class BookmarkComponent implements OnInit {

  public menuItems: Menu[]= [];
  public items: Menu[] = [];
  public bookmarkItems: any[] = [];

  public text: string = '';

  public bookmark = false;
  public bookmarkFlip = false;

  public open = false;
  public searchResult = false;
  public searchResultEmpty = false;

  constructor(public navServices: NavService) { }

  ngOnInit() {
    // this.navServices.items.subscribe(menuItems => {
    //   this.items = menuItems
    //   this.items.filter(items => {
    //     if (items.bookmark) {
    //       this.bookmarkItems.push(items)
    //     }
    //     if (!items.children) return false;
    //     items.children.filter(subItems => {
    //       if (subItems.bookmark) {
    //         this.bookmarkItems.push(subItems);
    //       }
    //     });
    //   });
    // });
  }

  openBookMark() {
    this.bookmark = !this.bookmark;
  }

  flipBookMark() {
    this.bookmarkFlip = !this.bookmarkFlip;
  }

  searchTerm(term: any): void {
    // Handle layout fix or removal based on the presence of a search term
    term ? this.addFix() : this.removeFix();
  
    // Return early if no term is provided
    if (!term) {
      this.menuItems = [];
      return;
    }
  
    // Initialize an array to store the search results
    const items: any[] = [];
    term = term.toLowerCase(); // Convert search term to lowercase for case-insensitive comparison
  
    // Function to recursively search items
    const search = (menuItems: any[]) => {
      menuItems.forEach((item: any) => {
        if (item?.title && item.title.toLowerCase().includes(term) && item.type === 'link') {
          items.push(item);
        }
  
        if (item.children) {
          item.children.forEach((subItem: any) => {
            if (subItem.title.toLowerCase().includes(term) && subItem.type === 'link') {
              subItem.icon = item.icon; // Assign the parent icon
              items.push(subItem);
            }
  
            if (subItem.children) {
              subItem.children.forEach((subSubItem: any) => {
                if (subSubItem.title.toLowerCase().includes(term)) {
                  subSubItem.icon = item.icon; // Assign the parent icon
                  items.push(subSubItem);
                }
              });
            }
          });
        }
      });
    };
  
    // Start searching from the top-level items
    search(this.items);
  
    // Check if search results are empty
    this.checkSearchResultEmpty(items);
  
    // Update menuItems with the search results
    this.menuItems = items;
  }

  checkSearchResultEmpty(items: string | any[]) {
    if (!items.length) {
      this.searchResultEmpty = true;
    } else {
      this.searchResultEmpty = false;
    }
  }

  addFix() {
    this.searchResult = true;
  }

  removeFix() {
    this.searchResult = false;
    this.text = '';
  }

  addToBookmark(items: any) {
    const index = this.bookmarkItems.indexOf(items);
    if (index === -1 && !items.bookmark) {
      items.bookmark = true;
      this.bookmarkItems.push(items);
      this.text = '';
    } else {
      this.bookmarkItems.splice(index, 1);
      items.bookmark = false;
    }
  }

}
