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

export const SearchbarAppearance = {
  Main: 'main',
  Results: 'results',
} as const;

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

@Component({
  selector: 'ui-search-bar',
  templateUrl: './search-bar.component.html',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class]': '["ui-search-bar", appearanceClass()]',
  },
})
export class UiSearchBarComponent {
  appearance = input<SearchbarAppearance>(SearchbarAppearance.Main);

  appearanceClass = computed(() => {
    return this.appearance() === SearchbarAppearance.Main
      ? 'ui-search-bar__main'
      : 'ui-search-bar__results';
  });

  inputControl = contentChild.required(NgControl, { read: NgControl });

  inputControlElementRef = contentChild.required(NgControl, {
    read: ElementRef,
  });
}
