import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { RdLib } from '../../base/rdLib';

export type BlockTypes = 'bar' | 'code' | 'plug' | 'peek' | 'stair' | 'twist' | 'chaseDot' | 'spinnerCube';

@Directive({
  selector: '[rd-block]'
})
export class Block extends RdComponent implements OnChanges {
  constructor(private element: ElementRef) { super(); }

  @Input("rd-block") block: any;
  @Input("rd-block-type") type: BlockTypes;

  target;

  // ngOnInit() {
  //   this.target = RdLib.screenOperations.getFirstChildWithWidth(this.element);
  // }

  blockDiv = function (block) {
    if (this.type) {
      let loadEl;
      if (block) {
        switch (this.type) {
          case "bar":
            loadEl = this.jQuery("#barLoading").clone();
            break;
          case "code":
            loadEl = this.jQuery("#codeLoading").clone();
            break;
          case "plug":
            loadEl = this.jQuery("#plugLoading").clone();
            break;
          case "peek":
            loadEl = this.jQuery("#peekLoading").clone();
            break;
          case "stair":
            loadEl = this.jQuery("#stairLoading").clone();
            break;
          case "twist":
            loadEl = this.jQuery("#twistLoading").clone();
            break;
          case "chaseDot":
            loadEl = this.jQuery("#sk-chase").clone();
            break;
          case "spinnerCube":
            loadEl = this.jQuery("#spinnerCube").clone();
            break;
        }

        this.jQuery(this.target).block({
          message: loadEl,
          css: {
            "border": 0,
            "background-color": "transparent"
          }
        });
      } else this.jQuery(this.target).unblock();
    }
    else {
      if (block) {
        this.window.mApp.block(this.target, {
          overlayColor: "#000000",
          type: "loader",
          state: "success",
          size: "lg"
        })
      } else this.window.mApp.unblock(this.target)
    }
  }

  ngOnChanges(changes) {
    var block = this.block && this.block != "false";
    this.target = RdLib.screenOperations.getFirstChildWithWidth(this.element);
    setTimeout(() => this.blockDiv(block));
  }
}

@Directive({
  selector: '[rd-block-page]'
})
export class BlockPage extends RdComponent implements OnChanges {
  @Input("rd-block-page") block: any;
  @Input("rd-block-type") type: BlockTypes;

  blockPage = function (block) {
    if (this.type) {
      let loadEl;
      if (block) {
        switch (this.type) {
          case "bar":
            loadEl = this.jQuery("#barLoading").clone();
            break;
          case "code":
            loadEl = this.jQuery("#codeLoading").clone();
            break;
          case "plug":
            loadEl = this.jQuery("#plugLoading").clone();
            break;
          case "peek":
            loadEl = this.jQuery("#peekLoading").clone();
            break;
          case "stair":
            loadEl = this.jQuery("#stairLoading").clone();
            break;
          case "twist":
            loadEl = this.jQuery("#twistLoading").clone();
            break;
          case "chaseDot":
            loadEl = this.jQuery("#sk-chase").clone();
            break;
          case "spinnerCube":
            loadEl = this.jQuery("#spinnerCube").clone();
            break;
        }

        this.jQuery(window).block({
          message: loadEl,
          css: {
            "border": 0,
            "background-color": "transparent"
          }
        });
      } else this.jQuery(window).unblock();
    }
    else {
      if (block) {
        this.window.mApp.blockPage({
          overlayColor: "#000000",
          type: "loader",
          state: "success",
          size: "lg"
        })
      } else this.window.mApp.unblock()
    }
  }.bind(this);

  ngOnChanges(changes) {
    var block = this.block && this.block != "false";
    setTimeout(() => this.blockPage(block));
  }
}