import { Component, Input, ContentChildren, ContentChild, TemplateRef, OnChanges, AfterContentInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent'

@Component({
  selector: 'rd-column',
  template: `
    <ng-content></ng-content>
  `
})
export class Column extends RdComponent {
  @ContentChild(TemplateRef) template;
}

@Component({
  selector: 'rd-columns',
  template: `
    <div class="row" *ngFor="let row of templates">
      <div [ngClass]="columnClass" *ngFor="let cell of row">
        <ng-template ngFor [ngForOf]="[1]" [ngForTemplate]="cell"></ng-template>
      </div>
    </div>
  `
})
export class Columns extends RdComponent implements OnChanges, AfterContentInit {
  @Input("rd-count") columnCount: number | string;
  @ContentChildren(Column) columns;

  columnClass;

  templates;

  refreshTemplates() {
    if (!this.columns) return;
    var columnCount = Number(this.columnCount);

    this.templates = [];
    for (var i = 0; i < Math.ceil(this.columns._results.length / columnCount); i++) {
      var innerArray = [];
      for (var j = 0; j < Math.min((this.columns._results.length - i * columnCount), columnCount); j++) {
        innerArray.push(this.columns._results[i * columnCount + j].template);
      }
      this.templates.push(innerArray);
    }
  }

  ngAfterContentInit() {
    this.refreshTemplates();
  }

  ngOnChanges(changes) {
    if (changes.columnCount) {
      switch (Number(this.columnCount)) {
        case 1:
          this.columnClass = "col-md-12";
          break;
        case 2:
          this.columnClass = "col-md-6";
          break;
        case 3:
          this.columnClass = "col-md-4";
          break;
        case 4:
          this.columnClass = "col-md-3";
          break;
        case 6:
          this.columnClass = "col-md-2";
          break;
        case 12:
          this.columnClass = "col-md-1";
          break;
        default:
          this.error("invalid column count:'" + this.columnCount + "' accepted values: (1,2,3,4,6,12)")
      }
      this.refreshTemplates();
    }
  }
}