import { Component, Input, ElementRef, AfterViewInit, Output, EventEmitter } from '@angular/core';
import { BaseChart } from "./baseChart";

@Component({
  selector: 'rd-color-picker',
  template: `
    <div id="dxElement" style="width:100%"></div>
  `
})
export class ColorPicker extends BaseChart implements AfterViewInit {
  @Input("rd-model") model: string = "#f05b41";
  @Output("rd-change") changeEvent: EventEmitter<string> = new EventEmitter<string>();

  dxElement;

  constructor(public element: ElementRef) {
    super(element);
    this.instance = "ColorPicker";
  }

  ngAfterViewInit() {
    this.container.dxColorBox({
      value: this.model,
      editAlphaChannel: true,
      applyValueMode: "instantly",
      onValueChanged: (e) => this.changeEvent.emit(e.component.option("value"))
    });
    this.dxElement = this.container.dxColorBox('instance');
  }
}