import { Directive, Input, OnChanges, SimpleChanges, HostBinding } from '@angular/core';
import { getColorForTask } from '../helpers';
import { Task } from '../defs';

@Directive({ selector: '[appTaskColor]' })
export class TaskColorDirective implements OnChanges {
  @HostBinding('style.color')
  color: string;

  @HostBinding('style.backgroundColor')
  backgroundColor: string;

  @HostBinding('style.borderColor')
  borderColor: string;

  @Input('appTaskColor')
  task: Task;

  @Input()
  target: 'color' | 'backgroundColor' | 'borderColor' = 'color';

  constructor() {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['task'] || changes['target']) {
      this.update();
    }
  }

  update() {
    this.color = undefined;
    this.backgroundColor = undefined;
    this.borderColor = undefined;

    if (!!this.task) {
      this[this.target] = getColorForTask(this.task);
    }
  }
}
