import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
  contentChild,
} from '@angular/core';

import { InputControlDirective } from '../core/input-control.directive';

export const InlineInputSize = {
  Small: 'small',
  Medium: 'medium',
} as const;
export type InlineInputSize =
  (typeof InlineInputSize)[keyof typeof InlineInputSize];

@Component({
  selector: 'ui-inline-input',
  templateUrl: './inline-input.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { '[class]': "['ui-inline-input', sizeClass()]" },
})
export class InlineInputComponent {
  size = input<InlineInputSize>(InlineInputSize.Medium);

  sizeClass = computed(() => {
    const size = this.size();
    switch (size) {
      case InlineInputSize.Small:
        return 'ui-inline-input--small';
      case InlineInputSize.Medium:
      default:
        return 'ui-inline-input--medium';
    }
  });

  inputControl = contentChild.required(InputControlDirective);
}
