import { Component, OnInit } from '@angular/core';
import { trigger, transition, animate, style } from '@angular/animations';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { ServiceService } from './../../config/service.service';
import { ShoppersService } from './../../config/shopper.service';
import { SearchService } from '../../config/search.service';
import { ModalController } from '@ionic/angular';
import { SearchmodalPage } from '../searchmodal/searchmodal.page';
import { SubjectService } from './../../config/subject.service';
@Component({
  selector: 'app-storelist',
  templateUrl: './storelist.page.html',
  styleUrls: ['./storelist.page.scss'],
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({ transform: 'translateY(100%)' }),
        animate('200ms ease-in', style({ transform: 'translateY(0%)' }))
      ]),
      transition(':leave', [
        animate('200ms ease-out', style({ transform: 'translateY(100%)' }))
      ])
    ])
  ]
})
export class StorelistPage implements OnInit {
  searchShow = false;
  slideOpts = {
    slidesPerView: 1.5
  };
  data: any;
  loader: boolean;
  centerId: any;

  constructor(
    public router: Router,
    public location: Location,
    public service: ServiceService,
    public shopperService: ShoppersService,
    private searchService: SearchService,
    private modalController: ModalController,
    private subjectService: SubjectService
  ) {
    this.loader = true;
    this.service.get('centerParams').then(val => {
      this.data = val;
      this.centerId = this.data.cId;
      this.shopperService.shopperList(this.data.cId, 'centerId');
      setTimeout(() => {
        this.loader = false;
      }, 2000);
    });
  }

  ngOnInit() { }

  goToPage(path, data = null) {
    this.service.set('shopParams', data);
    this.router.navigateByUrl(path, { queryParams: data });
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }

  goToSearch(path, data = null) {
    this.router.navigateByUrl(path, { queryParams: data });
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }

  goBack() {
    this.location.back();
  }

  clickSearch() {
    this.searchShow = true;
    this.searchService.searchList = [];
  }

  async searchModal() {
    this.subjectService.setTabData(false);
    const modal = await this.modalController.create({
      component: SearchmodalPage
    });
    modal.onDidDismiss().then(dataReturned => {
      this.subjectService.setTabData(true);
    });
    return await modal.present();
  }

  searchClose() {
    this.searchShow = false;
  }

  filterFunction(featuredStore): any[] {
    return featuredStore.filter(store => store.centerId === this.centerId);
  }
}
