import { BaseComponent } from '@/shared/base/BaseComponent';
import { Phone } from '@/shared/types/phone-types';
import { Locator } from '@playwright/test';

export class PhoneField extends BaseComponent {
  private readonly numberInput = this.host.getByTestId('phone-value-input');
  private readonly prefixMenuButton = this.host.getByTestId('phone-prefix-button');
  private readonly prefixMenuInput = this.host.page().getByTestId('phone-prefix-input');
  private readonly prefixMenuList = this.host.page().getByTestId('phone-prefix-list');

  async fill(phone: Phone, country: string): Promise<void> {
    await this.prefixMenuButton.click();
    await this.prefixMenuInput.fill(phone.prefix);
    await this.getPrefixMenuListItem(`${country} ${phone.prefix}`).click();
    await this.numberInput.fill(phone.number);
  }

  getPrefixMenuListItem(text: string): Locator {
    return this.prefixMenuList.getByRole('listitem').filter({ hasText: text });
  }
}
