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

@Component({
  selector: "rd-slider-content",
  template: `
    <ng-content></ng-content>
  `
})
export class CircularSliderContent extends RdComponent {

  @ContentChild(TemplateRef) template;
  @Input("rd-color") color: string = "#ECF0F1";
}

@Component({
  selector: 'rd-circular-slider',
  template: `
    <div style="overflow:hidden">
      <div class="rotating-slider">
        <ul class="slides">
          <li *ngFor="let item of contents._results" [ngStyle]="{'background':item.color}">
            <div class="inner">
              <ng-template ngFor [ngForOf]="[1]" [ngForTemplate]="item.template"></ng-template>            
            </div>
          </li>
        </ul>
      </div>
    </div>
  `
})
export class CircularSlider extends RdComponent implements AfterViewInit {
  constructor(private script: ScriptLoaderService, private style: StyleLoaderService, public element: ElementRef) {
    super();
    this.script.load(["./assets/js/rotating-slider.min.js"]);
    this.style.load(["./assets/css/rotating-slider.min.css"]);
  }

  @Input("rd-width") width: number = 480;
  @Input("rd-height") height: number = 360;
  @Input("rd-control") control: boolean = true;

  @ContentChildren(CircularSliderContent) contents;

  ngAfterViewInit() {
    this.jQuery(this.element.nativeElement).find('.rotating-slider').rotatingSlider({
      slideHeight: Math.min(this.height, window.innerWidth - 80),
      slideWidth: Math.min(this.width, window.innerWidth - 80),
      directionControls: this.control,
      autoRotateInterval: 5000,
    });
  }
}