import { Component, ViewEncapsulation, Input, AfterContentInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { Constants } from '../../library/constants';
import { PopUpOptions } from '../../base/rdPopUp';

@Component({
  selector: 'rd-modal',
  template: `
    <div class="modal-header" [ngStyle]="{'background': modalOptions.headerBackground ? modalOptions.headerBackground : 'white'}">      
      <h4 class="modal-title" [ngStyle]="{'color':modalOptions.headerBackground ? 'white' : titleColor}" style="font-weight:bold">
        <ng-content select="rd-title" modelTitle></ng-content>
      </h4>
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="line-height:1" *ngIf="modalOptions.closeOnOutsideClick"></button>
    </div>
    <div class="modal-body">
      <ng-content select="rd-body"></ng-content>
    </div>
    <div class="modal-footer">
      <ng-content select="rd-footer"></ng-content>
    </div>
  `,
  styles: ['rd-title{font-size:small}'],
  encapsulation: ViewEncapsulation.None
})
export class Modal extends RdComponent implements AfterContentInit {

  @Input("rd-modal-options") modalOptions: PopUpOptions = new PopUpOptions();

  titleColor = '#333';
  colorPalet = Constants.colorPalette('vivid');

  ngAfterContentInit() {
    var formSubmitElement = this.jQuery('.modal-body').find('rd-submit'); //if form used in modal

    if (formSubmitElement[0]) {
      this.jQuery(".modal-footer").remove();
      this.jQuery('.modal-body').find(".formFooter").css({ 'text-align': 'right', "padding-top": "5px", "border-top": "1px solid #e5e5e5" });
    }
    if (this.modalOptions.headerBackground) this.titleColor = 'white';
    else this.titleColor = this.colorPalet[Math.floor(Math.random() * this.colorPalet.length)];
  }
}