import { type Page, type Locator } from "@playwright/test";
import { fillDatePicker } from "../utils/date-picker";

export class OutboundShipmentCreateFormPage {
  readonly page: Page;
  readonly salesOrderSelect: Locator;
  readonly issueFromCombobox: Locator;
  readonly issueDateInput: Locator;
  readonly openLinesSection: Locator;
  readonly openLinesTable: Locator;
  readonly submitButton: Locator;
  readonly cancelButton: Locator;

  constructor(page: Page) {
    this.page = page;
    // The Sales Order Select renders a trigger whose accessible name is the
    // placeholder until an order is chosen.
    this.salesOrderSelect = page.getByText("Select a confirmed sales order");
    this.issueFromCombobox = page.getByPlaceholder("Search storage locations...");
    this.issueDateInput = page.getByLabel("Issue Date");
    this.openLinesSection = page.getByText("Open lines to issue (from the sales order)");
    this.openLinesTable = page.getByRole("table");
    this.submitButton = page.getByRole("button", {
      name: /create outbound shipment|creating/i,
    });
    // Top-level Cancel action, scoped to the form.
    this.cancelButton = page.locator("form").getByRole("button", { name: /cancel/i });
  }

  async goto() {
    await this.page.goto("/sales/outbound-shipment/create");
  }

  /** Open the Sales Order Select and pick the first available option. */
  async selectFirstSalesOrder() {
    await this.salesOrderSelect.click();
    const firstOption = this.page.getByRole("option").first();
    await firstOption.waitFor({ state: "visible" });
    await firstOption.click();
  }

  /** Open the Sales Order Select and pick the first option matching the given text. */
  async selectSalesOrderByName(name: string) {
    await this.salesOrderSelect.click();
    const option = this.page.getByRole("option", { name: new RegExp(name, "i") }).first();
    await option.waitFor({ state: "visible" });
    await option.click();
  }

  /** Open the Issue From combobox and select the first matching storage location. */
  async selectIssueFromByName(name: string) {
    await this.issueFromCombobox.click();
    await this.issueFromCombobox.fill(name);
    const option = this.page.getByRole("option", { name: new RegExp(name, "i") }).first();
    await option.waitFor({ state: "visible" });
    await option.click();
  }

  /** Open the Issue From combobox and select the first available storage location. */
  async selectFirstIssueFrom() {
    await this.issueFromCombobox.click();
    const firstOption = this.page.getByRole("option").first();
    await firstOption.waitFor({ state: "visible" });
    await firstOption.click();
  }

  async fillIssueDate(date: string) {
    await fillDatePicker(this.issueDateInput, date);
  }

  /** The open-lines preview row at the given zero-based index. */
  openLineRow(rowIndex: number): Locator {
    return this.openLinesTable.locator("tbody tr").nth(rowIndex);
  }

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

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