import { Component, ElementRef, ViewChild, OnChanges, Input, SimpleChanges, AfterViewInit, Output, EventEmitter, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { TextareaUtils } from '../../utilities/textarea-utils';

@Component({
  selector: 'auto-sizing-textarea',
  templateUrl: './auto-sizing-textarea.component.html',
  styleUrls: ['./auto-sizing-textarea.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AutoSizingTextareaComponent),
      multi: true
    }
  ],
})
export class AutoSizingTextareaComponent implements ControlValueAccessor, AfterViewInit {

  @Input('min-lines') public minLines: number = 1;
  @Input('max-lines') public maxLines: number = 1;
  @Input('default-lines') public defaultLines: number = 1;
  @Output() public contentChange = new EventEmitter<string>();
  @ViewChild('textarea', { read: ElementRef }) textarea: ElementRef;

  readonly: boolean
  @Input("readonly")
  public set input_readonly(value) {
    this.readonly = typeof value !== "undefined" && value !== false;
  }
  onChange = (value: string) => { };
  onTouched = () => { };
  autoExpand = TextareaUtils.autoExpand;
  private _content: string;
  public get content(): string {
    return this._content;
  }
  public set content(v: string) {

    if (this._content != v) {
      this._content = v;
      this.onChange(v);
    }

  }
  constructor() { }
  writeValue(value: string): void {
    this.content = value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
  }

  ngAfterViewInit() {
    const computed = window.getComputedStyle(this.textarea.nativeElement);
    const paddingTop = parseInt(computed.getPropertyValue('padding-top'));
    const paddingBot = parseInt(computed.getPropertyValue('padding-bottom'));
    const borderTop = parseInt(computed.getPropertyValue('border-top-width'));
    const borderBot = parseInt(computed.getPropertyValue('border-bottom-width'));
    const lineHeight = parseInt(computed.getPropertyValue('line-height'));
    const extraHeight = borderTop + borderBot + paddingTop + paddingBot;
    this.textarea.nativeElement.style.height = `${extraHeight + (this.defaultLines * lineHeight)}px`;
    this.textarea.nativeElement.style.minHeight = `${extraHeight + (this.minLines * lineHeight)}px`;
    this.textarea.nativeElement.style.maxHeight = `${extraHeight + (this.maxLines * lineHeight)}px`;



    this.contentChanged();
  }

  ngOnChanges(changes: SimpleChanges) {
    // 
    if (this.textarea && changes.content && changes.content.currentValue !== changes.content.previousValue) {
      // 
      this.contentChanged();
    }
  }

  contentChanged() {
    // move to next frame to allow change to propagate to the control?
    setTimeout(() => {
      // 
      this.contentChange.emit(this.content);
      TextareaUtils.autoExpand(this.textarea.nativeElement);
    }, 0);
  }

}
