import { Component, Input } from '@angular/core';
import { BaseFieldComponent, FieldConfig } from './base-field.component';

@Component({
  selector: 'app-textarea-field',
  template: `
    <div class="field-container">
      <label [for]="field.name" class="sq-form-label">
        <span class="label-text">{{ field.label }}</span>
        <span *ngIf="field.required" class="required-indicator">*</span>
      </label>
      <textarea
        [id]="field.name"
        class="sq-form-textarea"
        [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
        [value]="value"
        (input)="onChange($event.target.value)"
        [required]="field.required"
        [rows]="field.rows || 4"
        [cols]="field.cols || 50"
        [attr.maxlength]="field.maxLength"
        [readonly]="field.readonly"
        [disabled]="field.disabled"
      ></textarea>
      <div class="character-count" *ngIf="field.showCharacterCount && field.maxLength" [ngClass]="{
        'warning': value?.length > field.maxLength * 0.8,
        'error': value?.length >= field.maxLength
      }">
        {{ value?.length || 0 }}/{{ field.maxLength }}
      </div>
      <div *ngIf="field.description" class="field-description">
        {{ field.description }}
      </div>
      <div *ngIf="field.errorMessage" class="sq-error-message">
        {{ field.errorMessage }}
      </div>
    </div>
  `
})
export class TextareaFieldComponent extends BaseFieldComponent {
  @Input() field: FieldConfig;
  @Input() value: string;
}    