import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  Input,
  OnChanges,
  SimpleChanges,
} from "@angular/core";

@Component({
  selector: "nm-content-preview",
  template: `
    <div class="remote-data-loading-template" [style.width]="cssWidth"></div>
  `,
  styles: [
    `
      .remote-data-loading-template {
        height: 20px;
        margin: 15px 0px;
        background-color: #ededed;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ContentPreviewComponent implements OnChanges {
  @Input("min-width")
  public minWidth: number | string = 100;

  @Input("max-width")
  public maxWidth: number | string;

  @Input("random")
  public random: number | string = 0;

  public cssWidth: string;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (
      changes.hasOwnProperty("minWidth") ||
      changes.hasOwnProperty("maxWidth") ||
      changes.hasOwnProperty("random")
    ) {
      // the template should fill at least a third of the column
      // and up to it's maximum width
      let minWidth = this.toNumber(this.minWidth) / 3;
      let maxWidth = this.toNumber(this.maxWidth);
      let random = this.toNumber(this.random);

      let maxExtension = 0;

      if (random > 0) {
        maxExtension = random;
      } else if (maxWidth > 0) {
        maxExtension = maxWidth - minWidth;
      }

      let randomValue = Math.min(0.8, Math.max(0.3, Math.random()));
      this.cssWidth =
        minWidth + Math.floor(randomValue * Math.floor(maxExtension)) + "px";
      this.cdr.markForCheck();
    }
  }

  private toNumber(input: number | string): number {
    if (!input) {
      return 0;
    }

    if (typeof input === "string") {
      let value = input.replace(/px|em|pt|%/, "");
      return Number(value);
    }

    return input;
  }
}