import { type Page, type Locator } from "@playwright/test";

export class ItemCreateFormPage {
  readonly page: Page;
  readonly skuInput: Locator;
  readonly nameInput: Locator;
  readonly unitSelect: Locator;
  readonly submitButton: Locator;
  readonly cancelButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.skuInput = page.getByLabel("SKU");
    this.nameInput = page.getByLabel("Name");
    // Unit of Measure is fixed to "Each (each)" and rendered as a disabled
    // Select (Base UI). The FormControl Slot passes `id` to the Select's
    // outer <div>, not to the <button> trigger, so getByLabel does not resolve.
    // Scope to the field that contains the "Unit" label instead.
    this.unitSelect = page
      .locator('[data-slot="field"]', {
        has: page.locator('[data-slot="field-label"]', { hasText: /unit/i }),
      })
      .locator('[data-slot="select-trigger"]');
    this.submitButton = page.getByRole("button", { name: /create item|creating/i });
    this.cancelButton = page.getByRole("button", { name: /cancel/i });
  }

  async goto() {
    await this.page.goto("/master-data/item/create");
  }

  async fill(fields: { sku?: string; name?: string }) {
    if (fields.sku) await this.skuInput.fill(fields.sku);
    if (fields.name) await this.nameInput.fill(fields.name);
  }

  async submit() {
    await this.submitButton.click();
  }

  async cancel() {
    await this.cancelButton.click();
  }
}