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

/**
 * SummaryItem interface to follow
 */
export interface SummaryItem {
  /**
   * If the item should be highlighted with different color
   */
  highlight: boolean;

  /**
   * icon name defined by [NexOpt CDN]{@link https://cdn.nexopt.com/icons}
   */
  icon: string;
  /**
   * Name of the item
   */
  title: string;
  /**
   * Value of the item
   */
  value: string;
  /**
   * if true, the name is bigger and set next to the value
   */
  headliner: boolean;

  /**
   * If set, shows progress percentage
   */
  progress: number;

  /**
   * If set, colors the progress
   */
  progressColor: string;

  /**
   * If set, colors the progress text
   */
  progressTextColor: string;
}

/**
 * Summary Item component
 *
 * This component relies on {@link SummaryComponent|SummaryComponent}
 *
 * tag: no-summary-item
 */
@Component({
  selector: 'no-summary-item',
  templateUrl: './summary-item.component.html',
  styleUrls: ['./summary-item.component.scss'],
})
export class SummaryItemComponent implements OnInit {
  /**
   * Data to present in summary item
   *
   * @example
   * Simply pass in object
   * ```
   * item = {
   *    highlight: false,
   *    icon: 'mdi mdi-help',
   *    title: 'title of summary item',
   *    value: '12345'
   * }
   * ```
   *
   * implementation in plain html
   * ```
   * <no-summary-item item='{"highlight":true, "icon": "mdi mdi-help", "title":"title", "value": "value"}'></no-summary-item>
   * ```
   *
   * if you have array you can create summary items in js
   * ```
   * summaryItems.forEach((s) => {
   *  var el = document.createElement('no-summary-item');
   *  el.item = s; //inserting inside property
   *  summary.appendChild(el); // append to SummaryComponent
   * })
   * ```
   * @param {SummaryItem} item
   */
  @Input() item!: SummaryItem | any;

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

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