import { Component, Input, Output, EventEmitter, OnInit, OnChanges } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';

/**
 * params
 * {
 *  desc: "",
 *  title: "",
 *  focusText: ""
 * }
 */

export interface IMegaOptionItem {
  desc: string;
  title: string;
  focusText: string;
  active?: boolean;
}

@Component({
  selector: 'rd-mega-options',
  template: `
      <div class="row">
        <div [class]="sizeClass" (click)="optionClick(item)" *ngFor="let item of items">
          <label class="m-option" style="cursor:pointer" [ngStyle]="{'border-color':item.active ? '#34bfa3' : '#ebedf2'}">
            <span class="m-option__control">
              <span class="m-radio m-radio--success m-radio--check-bold">
                <input type="radio" name="m_option_1" value="1" *ngIf="!item.active">
                <input type="radio" name="m_option_1" value="1" checked *ngIf="item.active">
                <span></span>
              </span>
            </span>
            <span class="m-option__label">
              <span class="m-option__head">
                <span class="m-option__title">
                  {{item.title}}
                </span>
                <span class="m-option__focus">{{item.focusText}}</span>
              </span>
              <span class="m-option__body">
                {{item.desc}}
              </span>
            </span>
          </label>
        </div>
      </div>
  `
})
export class MegaOptions extends RdComponent implements OnInit, OnChanges {
  @Input("rd-items") items: Array<IMegaOptionItem> = [];
  @Input("rd-default") defaultItem;
  @Input("rd-size-class") sizeClass: string = "col-lg-6";
  @Output("rd-change") changeEvent: EventEmitter<any> = new EventEmitter<any>();

  selectedOption;

  ngOnInit() {
    this.setActivePassive();
  }

  ngOnChanges(changes) {
    if (changes.defaultItem) {
      this.setActivePassive();
    }
  }

  optionClick(item) {
    if (this.selectedOption) this.selectedOption.active = false;
    this.selectedOption = item;
    this.selectedOption.active = true;
    this.changeEvent.emit(item);
  }

  setActivePassive() {
    for (let item of this.items) {
      if (this.defaultItem && JSON.stringify(item) == JSON.stringify(this.defaultItem)) item.active = true;
      else item.active = false;
    }
  }
}