import { Component, Input, OnInit } from '@angular/core';
import { Helpers } from '../Utils/Helpers';

/**
 * Asset interface to follow
 */
export interface Asset {
  /**
   * If the asset is currently in use
   */
  isInUse: boolean;

  /**
   * current asset status
   */
  assetStatus: string;
  /**
   * Name of the asset
   */
  displayName: string;
  /**
   * Make of the asset
   */
  make: string;
  /**
   * Model of the asset
   */
  model: string;
}

/**
 * Asset component
 *
 * Visualizes Asset status + displayname + make + model
 *
 * tag: no-asset
 */
@Component({
  selector: 'no-asset',
  templateUrl: './asset.component.html',
  styleUrls: ['./asset.component.scss'],
})
export class AssetComponent implements OnInit {
  /**
   * Data to present in asset
   *
   * @example
   * Simply pass in object
   * ```
   * asset = {
   *    isInUse: false,
   *    assetStatus: 'Ok',
   *    displayName: 'My super car',
   *    make: 'BMW'
   *    model: 'X5'
   * }
   * ```
   *
   * implementation in plain html
   * ```
   * <no-asset asset='{"isInUse": false, "assetStatus": "Error", "displayName": "Hello", "make": "Make", "model": "Model"}'></no-asset>
   * ```
   *
   * if you have array you can create assets in js
   * ```
   * assets.forEach((a) => {
   *  var el = document.createElement('no-asset');
   *  el.asset = a; //inserting inside property
   *  assetsContainer.appendChild(el); // append to any container
   * })
   * ```
   * @param {Asset} asset
   */
  @Input() asset: Asset | any;

  /**
   * @ignore
   */
  constructor(private helpers: Helpers) {}

  /**
   * Parsing asset data if its passed in HTML format
   */
  ngOnInit() {
    if (
      !this.helpers.isObject(this.asset) &&
      !this.helpers.isEmpty(this.asset)
    ) {
      this.asset = JSON.parse(this.asset);
    }
  }
}