import { FocusMonitor } from '@angular/cdk/a11y';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import {
  Component,
  ElementRef,
  EventEmitter,
  HostBinding,
  Inject,
  Input,
  OnChanges,
  OnDestroy,
  OnInit,
  Optional,
  Output,
  Self,
  SimpleChanges,
  ViewChild,
  ViewEncapsulation,
} from '@angular/core';
import {
  AbstractControl,
  ControlValueAccessor,
  FormBuilder,
  FormControl,
  NgControl,
  Validators,
  ValidationErrors,
  ValidatorFn,
  FormGroup,
} from '@angular/forms';
import { MAT_FORM_FIELD, MatFormField, MatFormFieldControl } from '@angular/material/form-field';
import { Subject, tap } from 'rxjs';

@Component({
  selector: 'bri-textarea-fields',
  templateUrl: './textarea-fields.component.html',
  styleUrls: ['./textarea-fields.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class BriTextareaFieldsComponent implements OnInit, OnChanges {
  @ViewChild('textareaField')
  textareaField!: ElementRef<any>;

  @Input() label: string = 'Label';
  @Input() hideOutlineLabel: boolean = false;
  @Input() units: string | undefined;
  @Input() maxLength: number = 100;
  @Input() showMaxLengthErrorText = true;
  @Input() showCounterWhileTyping: boolean = true;
  @Input() textAreaPlaceholder: string = '';
  @Input() helperText: string | undefined;
  @Input() errorText: string | undefined;
  @Input() formatErrorText: string | undefined;
  @Input() requiredFieldErrorText: string | undefined;
  @Input() maxLengthErrorText: string | undefined;
  @Input() validators: any | undefined;
  @Input() hideFloatTextAreaLabel: boolean = false;
  @Input() showErrorIcon: boolean = true;
  @Input() inputModeKeyboard: string = '';
  @Input() typeKeyboard: string = '';
  @Input() patternKeyboard: string = '';
  @Input() expandable: boolean = false;
  @Input() minRow: number = 1;
  @Input() maxRow: number = 28;

  @Output() enter: EventEmitter<any> = new EventEmitter<any>();

  @Input() textareaFormControl!: FormControl;

  constructor() {}

  ngOnChanges(changes: any): void {}

  ngOnInit(): void {
    if (this.validators) {
      this.addMoreValidatorsToControls();
    }
  }

  private addMoreValidatorsToControls() {
    this.textareaFormControl.addValidators(this.validators);
    this.textareaFormControl.updateValueAndValidity();
  }

  validateField() {
    if (this.requiredFieldErrorText) {
      this.textareaFormControl.addValidators(Validators.required);
      this.textareaFormControl.updateValueAndValidity();
    }
  }

  onEnter(event?: any) {
    if (this.textareaFormControl.errors) {
      event.preventDefault();
    } else {
      this.textareaField.nativeElement.blur();
      this.enter.emit(this.textareaFormControl.value);
    }
  }

  shouldDislayMatHintForTextArea() {
    return (
      (this.helperText &&
        !(this.maxLengthErrorText && this.textareaFormControl.hasError('maxlength')) &&
        !(this.textareaFormControl.errors && !this.textareaFormControl.hasError('maxlength'))) ||
      (this.requiredFieldErrorText && this.textareaFormControl.hasError('required')) ||
      (this.maxLengthErrorText && this.textareaFormControl.hasError('maxlength')) ||
      (!(
        this.textareaFormControl.hasError('required') ||
        this.textareaFormControl.hasError('maxlength')
      ) &&
        this.textareaFormControl.errors) ||
      this.maxLength ||
      this.maxLengthErrorText
    );
  }
}