import { Component, Input, SimpleChanges } from '@angular/core';

@Component({
  selector: 'c8y-widget-demo',
  template: `
    <div class="p-16">
      <h1>Hi I'm a widget from angular</h1>
      <p class="text">{{ config?.text || 'No text' }}</p>
      <small>My context is: {{ config?.device?.name || 'No context' }}</small
      ><br />
      My time context is:
      <ul *ngIf="config?.date?.length === 2">
        <li>from: {{ (config?.date[0] | c8yDate) || 'No time context' }}</li>
        <li>To: {{ (config?.date[1] | c8yDate) || 'No time context' }}</li>
      </ul>
    </div>
  `,
  styles: [
    `
      .text {
        transform: scaleX(-1);
        font-size: 3em;
      }
    `
  ]
})
export class WidgetDemo {
  @Input() config;

  ngOnChanges(changes: SimpleChanges): void {
    if (!changes.config.firstChange && changes.config.currentValue.date) {
      console.log('Global time context changed:', this.config.date);
    }
  }
}