import { Component, AfterViewInit, Input, Output, ContentChild, EventEmitter, TemplateRef, ContentChildren } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { ScriptLoaderService } from "../../library/script-loader.service";
import { StyleLoaderService } from "../../library/style-loader.service";

declare const Swiper;

@Component({
  selector: 'rd-slider-item',
  template: `
    <ng-content></ng-content>
  `
})
export class SliderItem extends RdComponent {
  @Output("rd-click") clickEvent: EventEmitter<any> = new EventEmitter<any>();

  @ContentChild(TemplateRef) template;
}

@Component({
  selector: 'rd-slider',
  template: `
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" *ngFor="let slide of items" (click)="slide.clickEvent.emit()">
          <ng-template ngFor [ngForOf]="[1]" [ngForTemplate]="slide.template"></ng-template>        
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  `,
  styles: [`
    .swiper-container {
      width: 100%;
      height: 75px;
      margin:auto;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;     
      border-radius:10px;
    }
    .swiper-slide:hover {
      box-shadow: 0px 5px #EBEDC3 inset;
    }
  `]
})
export class Slider extends RdComponent implements AfterViewInit {
  constructor(style: StyleLoaderService, script: ScriptLoaderService) {
    super();
    style.load(['./assets/css/swiper.min.css']);
    script.load(["./assets/js/swiper.min.js"]);
  }

  @Input("rd-per-view") perViewCount: number = 5;
  @ContentChildren(SliderItem) items;

  ngAfterViewInit() {
    new Swiper('.swiper-container', {
      slidesPerView: this.perViewCount,
      spaceBetween: 10,
      loop: true,
      freeMode: true,
      mousewheel: true,
      grabCursor: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });
  }
}