import {
  ChangeDetectionStrategy,
  Component,
  computed,
  contentChild,
  input,
} from '@angular/core';
import { InputControlDirective } from '../core/input-control.directive';

export const TextFieldSize = {
  Small: 'small',
  Medium: 'medium',
  Large: 'large',
} as const;

export type TextFieldSize = (typeof TextFieldSize)[keyof typeof TextFieldSize];

@Component({
  selector: 'ui-text-field',
  templateUrl: './text-field.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [],
  host: {
    '[class]': '["ui-text-field", sizeClass()]',
  },
})
export class TextFieldComponent {
  inputControl = contentChild.required(InputControlDirective);

  size = input<TextFieldSize>('medium');

  sizeClass = computed(() => {
    return `ui-text-field__${this.size()}`;
  });
}
