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

@Component({
  selector: 'app-text-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>
      <input 
        [id]="field.name"
        type="text"
        class="sq-form-input"
        [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
        [value]="value"
        (input)="onChange($event.target.value)"
        [required]="field.required"
        [attr.maxlength]="field.maxLength"
        [attr.minlength]="field.minLength"
        [readonly]="field.readonly"
        [disabled]="field.disabled"
      />
      <div *ngIf="field.description" class="field-description">
        {{ field.description }}
      </div>
      <div class="character-count" *ngIf="field.showCharacterCount && value" [ngClass]="{
        'warning': field.maxLength && value?.length > field.maxLength * 0.8,
        'error': field.maxLength && value?.length >= field.maxLength
      }">
        {{ value?.length || 0 }}{{ field.maxLength ? '/' + field.maxLength : '' }}
      </div>
      <div *ngIf="field.errorMessage" class="sq-error-message">
        {{ field.errorMessage }}
      </div>
    </div>
  `
})
export class TextFieldComponent extends BaseFieldComponent {
  @Input() field: FieldConfig;
  @Input() value: string;
}