import { CategoryService } from './../../../core/services/category/category.service';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { faSlidersH } from '@fortawesome/free-solid-svg-icons';

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

  @Output() search_change = new EventEmitter();
  @Input() search!: string;

  icon_settings = faSlidersH;
  filters_is_visible: boolean = false;
  categories = [];


  constructor(private categoryService: CategoryService) {}

  ngOnInit(): void {
    this.getCategories();
  }

  showFilters() {
    const filters: any = document.querySelector('.discover__filters');
    const carousel: any = document.querySelector('.carousel_size');
    if (!this.filters_is_visible) {
      console.log('Run show filters');
      filters.classList.add('discover__filters-show');
      this.filters_is_visible = true;
      carousel.classList.add('carousel_size_show');
      console.log('listo');
    } else {
      console.log('Run hide filters');
      filters.classList.remove('discover__filters-show');
      this.filters_is_visible = false;
      carousel.classList.remove('carousel_size_show');
    }
  }

  handlePatternSearch = ($event: string) => {
    this.search_change.emit($event);
  }

  getCategories(){
    this.categoryService.getCategories().subscribe(
      (data) => {
        this.categories = data.results
        console.log("Data result categories: ",data)
      },
      (error) => {

      }
    )
  }

}