import DatePeriodSelector from "@/components/displays/buttons/DatePeriodSelector.vue";

import { expect, test } from "./fixtures/plenoCt";

const selection = {
  startDate: new Date("2026-05-01T00:00:00.000Z"),
  endDate: new Date("2026-05-04T23:59:59.999Z"),
};

const mountDatePeriodSelector = async (mount, props = {}) =>
  mount(DatePeriodSelector, {
    props: {
      selection,
      allowEmptySelection: true,
      visibility: {
        showMonthSelector: true,
        showYearSelector: true,
        showUpdateButton: false,
      },
      onSelectionChange: () => {},
      ...props,
    },
    hooksConfig: {
      locale: "en",
    },
  });

test.describe("DatePeriodSelector component", () => {
  test("desktop other month action opens an inline month picker modal", async ({ mount, page }, testInfo) => {
    test.skip(testInfo.project.name.includes("mobile"), "Desktop shortcut buttons are replaced by the mobile select.");

    await page.clock.setFixedTime(new Date("2026-05-04T10:00:00.000Z"));

    const component = await mountDatePeriodSelector(mount);

    await expect(component.getByTestId("date-period-shortcut-anytime")).toContainText(/anytime/i);
    await component.getByTestId("date-period-other-dropdown-trigger").click();

    const otherMonthOption = component.getByTestId("date-period-other-other_month");
    await expect(otherMonthOption).toBeVisible();
    await expect(otherMonthOption).toContainText(/other month/i);

    await otherMonthOption.click();

    await expect(component.getByTestId("date-period-other-month-modal")).toBeVisible();
    await expect(component.getByTestId("date-period-other-month-picker")).toBeVisible();
  });

  test("mobile shortcuts keep primary and other actions reachable without route boot", async ({ mount, page }) => {
    await page.setViewportSize({ width: 390, height: 844 });
    await page.clock.setFixedTime(new Date("2026-05-04T10:00:00.000Z"));

    const component = await mountDatePeriodSelector(mount);

    const shortcutSelect = component.getByTestId("date-period-shortcuts");
    await expect(shortcutSelect.locator("option").filter({ hasText: /anytime/i })).toHaveCount(1);

    await component.getByTestId("date-period-other-dropdown-trigger").click();
    await expect(component.getByTestId("date-period-other-other_month")).toBeVisible();
  });
});